/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Template: cocoon-master
Author: わいひら
Author URI: https://nelog.jp/
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。
Tags: two-columns,left-sidebar,right-sidebar
Version: 2.7.7.1725953193
Updated: 2024-09-10 16:26:33

*/

.item-label {
    font-weight: 600;
}

.metaslider .slides img {
    width: 100%;
    display: block;
    height: 50svh;
    background-size: cover;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

span.site-name-text {
    text-align: center;
    font-size: 2.5rem;
    color: var(--cocoon-text-color);
    letter-spacing: 2px;
    line-height: 1.6;
    font-weight: bold;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.sliderbox {
    position: relative;
}

/* ヘッダー（トップページのみ固定）---------------------------------------------- */

/* アピールエリア---------------------------------------------- */
.appeal{
	height:100svh; /*高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

.appeal-in {
	height:100%; /*高さいっぱい*/
	width:100%; /*幅いっぱい*/
	background-color:rgba(255,255,255,.3); /*背景色、白の透過率*/
	backdrop-filter: blur(5px); /*ぼかしpxで調整*/
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*背景色リセット*/
}



/* 矢印の配置---------------------------------------------- */
.arrow-down{
	position: absolute;/*矢印を配置する*/
	bottom:6em;/*下から5emの位置*/
	left: 50%;/*中央寄せにする*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*矢印のスタイル*/
.arrow-down span{
	display: block;
	line-height: 1;
	width: 1em;/*矢印の幅*/
	height: 1em;/*矢印の高さ*/
	border: 2px solid #ffffff;/*矢印の太さ、色*/
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);/*矢印の傾き*/
}

/*アニメーション追加*/
.arrow-anime{
	animation: arrow-move 2s ease infinite;/*2秒かけて永遠にループ*/
}

/*高さ・透過が変化して線が上から下に動く*/
@keyframes arrow-move{
	0%{
		transform: translateY(-50px);
		opacity: 1;
	}
	100%{
		transform: translateY(0px);
		opacity: 0;
	}
}

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

/*背景色を白にする（白くしない場合、body{ }部分は削除してOKです）*/
body {
	background-color:#fff!important;
}

/*セクション枠（数値はお好みで調整できます）*/
.section-wrap{
	padding-top:5em;/*内側余白をあける（上）*/
	padding-bottom:5em;/*内側余白をあける（下）*/
	margin-bottom:0;/*下部外側余白を0にする*/
}

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color: var(--cocoon-text-color);/*見出しの色*/
	letter-spacing:2px;/*文字間の余白*/
	line-height:1.6; /*行の高さ*/
	font-weight:bold;/*太字にする（不要なら削除）*/
	position:relative;/*起点*/
	padding-bottom:1rem;/*見出し下余白（内側）*/
	margin-bottom:3rem;/*見出し下余白（外側）*/
}

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

/*見出し下の線*/
.heading::after {
	display: block;
	content: "";
	width: 2.5rem;/*線の幅*/
	height: 1px;/*線の高さ*/
	border-radius: 10px;/*線の丸み*/
	background-color: var(--cocoon-text-color);/*線の色*/
	position: absolute;
	bottom: 0;/*下からの位置*/
	left: 50%;/*中央揃え*/
	transform: translateX(-50%);/*中央揃え調整*/
}




/* リンクボタン---------------------------------------------- */

/*ボタンの配置*/
.link-btn{
	display:block;/*ブロック要素*/
	text-align:center;/*中央揃え*/
	position:relative;/*起点*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: 100%;/*ボタンの最大幅*/
	width: auto;/*ボタンの幅*/
	padding: .7em 2em .7em 1em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
}

/*矢印のスタイル*/
.link-btn a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.link-btn a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:var(--cocoon-white-color);
}

.link-btn a:hover:after {
	border-color:var(--cocoon-white-color);
}

/* 記事を横並びにする(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置 */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横2列に並べる*/
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*モバイルで横１列*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*モバイルで横２列*/	
	}	
}

/*モバイルで記事タイトル文字サイズを調整*/
/*834px以下*/
@media screen and (max-width: 834px){
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/*タブ切り替え***************************/

/* 親要素にflexを指定しタブを横並びに*/
.tab-wrap {
	--active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
	--tab-gap:10px;/*タブ間の余白*/
	display: flex;
	flex-wrap: wrap;
	gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	border-bottom:1px solid var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex-grow:1;
	position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	background-color: var(--active-tab-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 10px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	margin-top:1em;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
 	padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}

.color-area-1{
	background-color:#eee;/*背景色1をここで設定します*/
}

.color-area-2{
	background-color:#f7f7f7;/*背景色2をここで設定します*/
}

.color-area-3{
	background-color:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}

/* フルワイドカスタマイズここまで-------------------------------------- */

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

.sbi_feedtheme_header_text h3 {
    border: 0px;
    background: #ffffff;
    color: #000000 !important;
}

/* 目次全体デザイン */
.toc{
background: #F9F9F9;
    border: none;
    display: block;
    border-top: 0px solid;
    border-top-color: #eee;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 0px 0px -10px;
    padding-left: 0px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a";
    font-size: 16px;
    margin-right: 5px;
    color: #FFF;
    background-color: #000000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 8px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #000000; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

.appeal-in {
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,.3);
	backdrop-filter: blur(5px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
/*　タブレット横、パソコン用　*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*　タブレット縦用　*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*　スマホ横用　*/
}

/*480px以下*/
@media screen and (max-width: 480px){
.metaslider .slides img {
        width: 100% !important;
        display: block !important;
        height: 100svh !important;
        background-size: cover !important;
        object-fit: cover !important;
}
div#header-container {
    display: none;
}
.mblt-header-mobile-buttons {
		margin-top: 0;/*上部の余白46pxを消す*/
}
.front-top-page .mobile-header-menu-buttons {
		background-color: initial;/*背景を初期化して透明に*/
		box-shadow: none;/*影を消す*/
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.front-top-page > div > .content {
margin-top: -2px;
}
}

.sliderbox {
    position: relative;
    overflow: hidden;
}

.metaslider {
    position: relative;
    z-index: 1;
}

.arrow-down {
    z-index: 6;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: block;
    z-index: 5;
    pointer-events: none;
}

.metaslider::after,
.metaslider .slides::after,
.metaslider .flex-viewport::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Template: cocoon-master
Author: わいひら
Author URI: https://nelog.jp/
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。
Tags: two-columns,left-sidebar,right-sidebar
Version: 2.7.7.1725953193
Updated: 2024-09-10 16:26:33

*/

.item-label {
    font-weight: 600;
}

.metaslider .slides img {
    width: 100%;
    display: block;
    height: 50svh;
    background-size: cover;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

span.site-name-text {
    text-align: center;
    font-size: 2.5rem;
    color: var(--cocoon-text-color);
    letter-spacing: 2px;
    line-height: 1.6;
    font-weight: bold;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.sliderbox {
    position: relative;
}

/* ヘッダー（トップページのみ固定）---------------------------------------------- */

/* アピールエリア---------------------------------------------- */
.appeal{
	height:100svh; /*高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

.appeal-in {
	height:100%; /*高さいっぱい*/
	width:100%; /*幅いっぱい*/
	background-color:rgba(255,255,255,.3); /*背景色、白の透過率*/
	backdrop-filter: blur(5px); /*ぼかしpxで調整*/
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*背景色リセット*/
}



/* 矢印の配置---------------------------------------------- */
.arrow-down{
	position: absolute;/*矢印を配置する*/
	bottom:6em;/*下から5emの位置*/
	left: 50%;/*中央寄せにする*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*矢印のスタイル*/
.arrow-down span{
	display: block;
	line-height: 1;
	width: 1em;/*矢印の幅*/
	height: 1em;/*矢印の高さ*/
	border: 2px solid #ffffff;/*矢印の太さ、色*/
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);/*矢印の傾き*/
}

/*アニメーション追加*/
.arrow-anime{
	animation: arrow-move 2s ease infinite;/*2秒かけて永遠にループ*/
}

/*高さ・透過が変化して線が上から下に動く*/
@keyframes arrow-move{
	0%{
		transform: translateY(-50px);
		opacity: 1;
	}
	100%{
		transform: translateY(0px);
		opacity: 0;
	}
}

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

/*背景色を白にする（白くしない場合、body{ }部分は削除してOKです）*/
body {
	background-color:#fff!important;
}

/*セクション枠（数値はお好みで調整できます）*/
.section-wrap{
	padding-top:5em;/*内側余白をあける（上）*/
	padding-bottom:5em;/*内側余白をあける（下）*/
	margin-bottom:0;/*下部外側余白を0にする*/
}

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color: var(--cocoon-text-color);/*見出しの色*/
	letter-spacing:2px;/*文字間の余白*/
	line-height:1.6; /*行の高さ*/
	font-weight:bold;/*太字にする（不要なら削除）*/
	position:relative;/*起点*/
	padding-bottom:1rem;/*見出し下余白（内側）*/
	margin-bottom:3rem;/*見出し下余白（外側）*/
}

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

/*見出し下の線*/
.heading::after {
	display: block;
	content: "";
	width: 2.5rem;/*線の幅*/
	height: 1px;/*線の高さ*/
	border-radius: 10px;/*線の丸み*/
	background-color: var(--cocoon-text-color);/*線の色*/
	position: absolute;
	bottom: 0;/*下からの位置*/
	left: 50%;/*中央揃え*/
	transform: translateX(-50%);/*中央揃え調整*/
}




/* リンクボタン---------------------------------------------- */

/*ボタンの配置*/
.link-btn{
	display:block;/*ブロック要素*/
	text-align:center;/*中央揃え*/
	position:relative;/*起点*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: 100%;/*ボタンの最大幅*/
	width: auto;/*ボタンの幅*/
	padding: .7em 2em .7em 1em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
}

/*矢印のスタイル*/
.link-btn a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.link-btn a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:var(--cocoon-white-color);
}

.link-btn a:hover:after {
	border-color:var(--cocoon-white-color);
}

/* 記事を横並びにする(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置 */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横2列に並べる*/
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*モバイルで横１列*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*モバイルで横２列*/	
	}	
}

/*モバイルで記事タイトル文字サイズを調整*/
/*834px以下*/
@media screen and (max-width: 834px){
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/*タブ切り替え***************************/

/* 親要素にflexを指定しタブを横並びに*/
.tab-wrap {
	--active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
	--tab-gap:10px;/*タブ間の余白*/
	display: flex;
	flex-wrap: wrap;
	gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	border-bottom:1px solid var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex-grow:1;
	position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	background-color: var(--active-tab-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 10px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	margin-top:1em;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
 	padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}

.color-area-1{
	background-color:#eee;/*背景色1をここで設定します*/
}

.color-area-2{
	background-color:#f7f7f7;/*背景色2をここで設定します*/
}

.color-area-3{
	background-color:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}

/* フルワイドカスタマイズここまで-------------------------------------- */

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

.sbi_feedtheme_header_text h3 {
    border: 0px;
    background: #ffffff;
    color: #000000 !important;
}

/* 目次全体デザイン */
.toc{
background: #F9F9F9;
    border: none;
    display: block;
    border-top: 0px solid;
    border-top-color: #eee;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 0px 0px -10px;
    padding-left: 0px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a";
    font-size: 16px;
    margin-right: 5px;
    color: #FFF;
    background-color: #000000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 8px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #000000; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

.appeal-in {
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,.3);
	backdrop-filter: blur(5px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
/*　タブレット横、パソコン用　*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*　タブレット縦用　*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*　スマホ横用　*/
}

/*480px以下*/
@media screen and (max-width: 480px){
.metaslider .slides img {
        width: 100% !important;
        display: block !important;
        height: 100svh !important;
        background-size: cover !important;
        object-fit: cover !important;
}
div#header-container {
    display: none;
}
.mblt-header-mobile-buttons {
		margin-top: 0;/*上部の余白46pxを消す*/
}
.front-top-page .mobile-header-menu-buttons {
		background-color: initial;/*背景を初期化して透明に*/
		box-shadow: none;/*影を消す*/
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.front-top-page > div > .content {
margin-top: -2px;
}
}

.sliderbox {
    position: relative;
    overflow: hidden;
}

.metaslider {
    position: relative;
    z-index: 1;
}

.arrow-down {
    z-index: 6;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: block;
    z-index: 5;
    pointer-events: none;
}

.metaslider::after,
.metaslider .slides::after,
.metaslider .flex-viewport::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.sliderbox {
    position: relative;
}

.sliderbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2); /* ほんのり暗く */
}

/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Template: cocoon-master
Author: わいひら
Author URI: https://nelog.jp/
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。
Tags: two-columns,left-sidebar,right-sidebar
Version: 2.7.7.1725953193
Updated: 2024-09-10 16:26:33

*/

.item-label {
    font-weight: 600;
}

.metaslider .slides img {
    width: 100%;
    display: block;
    height: 50svh;
    background-size: cover;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

span.site-name-text {
    text-align: center;
    font-size: 2.5rem;
    color: var(--cocoon-text-color);
    letter-spacing: 2px;
    line-height: 1.6;
    font-weight: bold;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.sliderbox {
    position: relative;
}

/* ヘッダー（トップページのみ固定）---------------------------------------------- */

/* アピールエリア---------------------------------------------- */
.appeal{
	height:100svh; /*高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

.appeal-in {
	height:100%; /*高さいっぱい*/
	width:100%; /*幅いっぱい*/
	background-color:rgba(255,255,255,.3); /*背景色、白の透過率*/
	backdrop-filter: blur(5px); /*ぼかしpxで調整*/
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*背景色リセット*/
}



/* 矢印の配置---------------------------------------------- */
.arrow-down{
	position: absolute;/*矢印を配置する*/
	bottom:6em;/*下から5emの位置*/
	left: 50%;/*中央寄せにする*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*矢印のスタイル*/
.arrow-down span{
	display: block;
	line-height: 1;
	width: 1em;/*矢印の幅*/
	height: 1em;/*矢印の高さ*/
	border: 2px solid #ffffff;/*矢印の太さ、色*/
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);/*矢印の傾き*/
}

/*アニメーション追加*/
.arrow-anime{
	animation: arrow-move 2s ease infinite;/*2秒かけて永遠にループ*/
}

/*高さ・透過が変化して線が上から下に動く*/
@keyframes arrow-move{
	0%{
		transform: translateY(-50px);
		opacity: 1;
	}
	100%{
		transform: translateY(0px);
		opacity: 0;
	}
}

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

/*背景色を白にする（白くしない場合、body{ }部分は削除してOKです）*/
body {
	background-color:#fff!important;
}

/*セクション枠（数値はお好みで調整できます）*/
.section-wrap{
	padding-top:5em;/*内側余白をあける（上）*/
	padding-bottom:5em;/*内側余白をあける（下）*/
	margin-bottom:0;/*下部外側余白を0にする*/
}

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color: var(--cocoon-text-color);/*見出しの色*/
	letter-spacing:2px;/*文字間の余白*/
	line-height:1.6; /*行の高さ*/
	font-weight:bold;/*太字にする（不要なら削除）*/
	position:relative;/*起点*/
	padding-bottom:1rem;/*見出し下余白（内側）*/
	margin-bottom:3rem;/*見出し下余白（外側）*/
}

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

/*見出し下の線*/
.heading::after {
	display: block;
	content: "";
	width: 2.5rem;/*線の幅*/
	height: 1px;/*線の高さ*/
	border-radius: 10px;/*線の丸み*/
	background-color: var(--cocoon-text-color);/*線の色*/
	position: absolute;
	bottom: 0;/*下からの位置*/
	left: 50%;/*中央揃え*/
	transform: translateX(-50%);/*中央揃え調整*/
}




/* リンクボタン---------------------------------------------- */

/*ボタンの配置*/
.link-btn{
	display:block;/*ブロック要素*/
	text-align:center;/*中央揃え*/
	position:relative;/*起点*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: 100%;/*ボタンの最大幅*/
	width: auto;/*ボタンの幅*/
	padding: .7em 2em .7em 1em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
}

/*矢印のスタイル*/
.link-btn a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.link-btn a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:var(--cocoon-white-color);
}

.link-btn a:hover:after {
	border-color:var(--cocoon-white-color);
}

/* 記事を横並びにする(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置 */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横2列に並べる*/
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*モバイルで横１列*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*モバイルで横２列*/	
	}	
}

/*モバイルで記事タイトル文字サイズを調整*/
/*834px以下*/
@media screen and (max-width: 834px){
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/*タブ切り替え***************************/

/* 親要素にflexを指定しタブを横並びに*/
.tab-wrap {
	--active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
	--tab-gap:10px;/*タブ間の余白*/
	display: flex;
	flex-wrap: wrap;
	gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	border-bottom:1px solid var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex-grow:1;
	position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	background-color: var(--active-tab-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 10px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	margin-top:1em;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
 	padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}

.color-area-1{
	background-color:#eee;/*背景色1をここで設定します*/
}

.color-area-2{
	background-color:#f7f7f7;/*背景色2をここで設定します*/
}

.color-area-3{
	background-color:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}

/* フルワイドカスタマイズここまで-------------------------------------- */

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

.sbi_feedtheme_header_text h3 {
    border: 0px;
    background: #ffffff;
    color: #000000 !important;
}

/* 目次全体デザイン */
.toc{
background: #F9F9F9;
    border: none;
    display: block;
    border-top: 0px solid;
    border-top-color: #eee;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 0px 0px -10px;
    padding-left: 0px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a";
    font-size: 16px;
    margin-right: 5px;
    color: #FFF;
    background-color: #000000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 8px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #000000; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

.appeal-in {
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,.3);
	backdrop-filter: blur(5px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
/*　タブレット横、パソコン用　*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*　タブレット縦用　*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*　スマホ横用　*/
}

/*480px以下*/
@media screen and (max-width: 480px){
.metaslider .slides img {
        width: 100% !important;
        display: block !important;
        height: 100svh !important;
        background-size: cover !important;
        object-fit: cover !important;
}
div#header-container {
    display: none;
}
.mblt-header-mobile-buttons {
		margin-top: 0;/*上部の余白46pxを消す*/
}
.front-top-page .mobile-header-menu-buttons {
		background-color: initial;/*背景を初期化して透明に*/
		box-shadow: none;/*影を消す*/
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.front-top-page > div > .content {
margin-top: -2px;
}
}

.sliderbox {
    position: relative;
    overflow: hidden;
}

.metaslider {
    position: relative;
    z-index: 1;
}

.arrow-down {
    z-index: 6;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: block;
    z-index: 5;
    pointer-events: none;
}

.metaslider::after,
.metaslider .slides::after,
.metaslider .flex-viewport::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Template: cocoon-master
Author: わいひら
Author URI: https://nelog.jp/
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。
Tags: two-columns,left-sidebar,right-sidebar
Version: 2.7.7.1725953193
Updated: 2024-09-10 16:26:33

*/

.item-label {
    font-weight: 600;
}

.metaslider .slides img {
    width: 100%;
    display: block;
    height: 50svh;
    background-size: cover;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

span.site-name-text {
    text-align: center;
    font-size: 2.5rem;
    color: var(--cocoon-text-color);
    letter-spacing: 2px;
    line-height: 1.6;
    font-weight: bold;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.sliderbox {
    position: relative;
}

/* ヘッダー（トップページのみ固定）---------------------------------------------- */

/* アピールエリア---------------------------------------------- */
.appeal{
	height:100svh; /*高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

.appeal-in {
	height:100%; /*高さいっぱい*/
	width:100%; /*幅いっぱい*/
	background-color:rgba(255,255,255,.3); /*背景色、白の透過率*/
	backdrop-filter: blur(5px); /*ぼかしpxで調整*/
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*背景色リセット*/
}



/* 矢印の配置---------------------------------------------- */
.arrow-down{
	position: absolute;/*矢印を配置する*/
	bottom:6em;/*下から5emの位置*/
	left: 50%;/*中央寄せにする*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

/*矢印のスタイル*/
.arrow-down span{
	display: block;
	line-height: 1;
	width: 1em;/*矢印の幅*/
	height: 1em;/*矢印の高さ*/
	border: 2px solid #ffffff;/*矢印の太さ、色*/
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);/*矢印の傾き*/
}

/*アニメーション追加*/
.arrow-anime{
	animation: arrow-move 2s ease infinite;/*2秒かけて永遠にループ*/
}

/*高さ・透過が変化して線が上から下に動く*/
@keyframes arrow-move{
	0%{
		transform: translateY(-50px);
		opacity: 1;
	}
	100%{
		transform: translateY(0px);
		opacity: 0;
	}
}

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

/*背景色を白にする（白くしない場合、body{ }部分は削除してOKです）*/
body {
	background-color:#fff!important;
}

/*セクション枠（数値はお好みで調整できます）*/
.section-wrap{
	padding-top:5em;/*内側余白をあける（上）*/
	padding-bottom:5em;/*内側余白をあける（下）*/
	margin-bottom:0;/*下部外側余白を0にする*/
}

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color: var(--cocoon-text-color);/*見出しの色*/
	letter-spacing:2px;/*文字間の余白*/
	line-height:1.6; /*行の高さ*/
	font-weight:bold;/*太字にする（不要なら削除）*/
	position:relative;/*起点*/
	padding-bottom:1rem;/*見出し下余白（内側）*/
	margin-bottom:3rem;/*見出し下余白（外側）*/
}

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

/*見出し下の線*/
.heading::after {
	display: block;
	content: "";
	width: 2.5rem;/*線の幅*/
	height: 1px;/*線の高さ*/
	border-radius: 10px;/*線の丸み*/
	background-color: var(--cocoon-text-color);/*線の色*/
	position: absolute;
	bottom: 0;/*下からの位置*/
	left: 50%;/*中央揃え*/
	transform: translateX(-50%);/*中央揃え調整*/
}




/* リンクボタン---------------------------------------------- */

/*ボタンの配置*/
.link-btn{
	display:block;/*ブロック要素*/
	text-align:center;/*中央揃え*/
	position:relative;/*起点*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: 100%;/*ボタンの最大幅*/
	width: auto;/*ボタンの幅*/
	padding: .7em 2em .7em 1em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
}

/*矢印のスタイル*/
.link-btn a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.link-btn a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:var(--cocoon-white-color);
}

.link-btn a:hover:after {
	border-color:var(--cocoon-white-color);
}

/* 記事を横並びにする(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置 */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横2列に並べる*/
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*モバイルで横１列*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*モバイルで横２列*/	
	}	
}

/*モバイルで記事タイトル文字サイズを調整*/
/*834px以下*/
@media screen and (max-width: 834px){
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/*タブ切り替え***************************/

/* 親要素にflexを指定しタブを横並びに*/
.tab-wrap {
	--active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
	--tab-gap:10px;/*タブ間の余白*/
	display: flex;
	flex-wrap: wrap;
	gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	border-bottom:1px solid var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex-grow:1;
	position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	background-color: var(--active-tab-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 10px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	margin-top:1em;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}

/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
 	padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
	padding-top:5em;/*セクションの上部余白（ここはお好みで調整可能）*/
	padding-bottom:5em;/*セクションの下部余白（ここはお好みで調整可能）*/
}

.color-area-1{
	background-color:#eee;/*背景色1をここで設定します*/
}

.color-area-2{
	background-color:#f7f7f7;/*背景色2をここで設定します*/
}

.color-area-3{
	background-color:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}

/* フルワイドカスタマイズここまで-------------------------------------- */

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

.sbi_feedtheme_header_text h3 {
    border: 0px;
    background: #ffffff;
    color: #000000 !important;
}

/* 目次全体デザイン */
.toc{
background: #F9F9F9;
    border: none;
    display: block;
    border-top: 0px solid;
    border-top-color: #eee;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 0px 0px -10px;
    padding-left: 0px;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a";
    font-size: 16px;
    margin-right: 5px;
    color: #FFF;
    background-color: #000000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 8px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #000000; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

.appeal-in {
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,.3);
	backdrop-filter: blur(5px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
/*　タブレット横、パソコン用　*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*　タブレット縦用　*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*　スマホ横用　*/
}

/*480px以下*/
@media screen and (max-width: 480px){
.metaslider .slides img {
        width: 100% !important;
        display: block !important;
        height: 100svh !important;
        background-size: cover !important;
        object-fit: cover !important;
}
div#header-container {
    display: none;
}
.mblt-header-mobile-buttons {
		margin-top: 0;/*上部の余白46pxを消す*/
}
.front-top-page .mobile-header-menu-buttons {
		background-color: initial;/*背景を初期化して透明に*/
		box-shadow: none;/*影を消す*/
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.front-top-page > div > .content {
margin-top: -2px;
}
}

.sliderbox {
    position: relative;
    overflow: hidden;
}

.metaslider {
    position: relative;
    z-index: 1;
}

.arrow-down {
    z-index: 6;
}

canvas#waveCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: block;
    z-index: 5;
    pointer-events: none;
}

.metaslider::after,
.metaslider .slides::after,
.metaslider .flex-viewport::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.sliderbox {
    position: relative;
}

.sliderbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2); /* ほんのり暗く */
}

.section-wrap {
    padding-top: 8em;
    padding-bottom: 8em;
}

body {
    line-height: 1.8;
}

body {
    background: #fff;
    color: #111;
}

.color-area-1,
.color-area-2 {
    background: #f5f5f7;
}

a {
    color: #111;
}

.link-btn a {
    border-radius: 999px;
    border: 1px solid #ddd;
    background: transparent;
    padding: 0.8em 2em;
}

.link-btn a:hover {
    background: #111;
    color: #fff;
}

.entry-card-wrap,
.new-entry-card,
.popular-entry-card {
    box-shadow: none !important;
    border: none;
}

.heading {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.heading span {
    color: #666;
}

canvas#waveCanvas {
    z-index: 5;
}

.sliderbox {
    margin-bottom: -5px;
}

/* =========================
   MinatoTakazawa
   Simple / Modern / Apple-like
   ========================= */

/* 全体 */
body {
  background: #ffffff !important;
  color: #111111;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    Hiragino Sans, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* リンク */
a {
  color: #111111;
  text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease, transform 0.25s ease;
}

a:hover {
  opacity: 0.72;
  text-decoration: none;
}

/* 背景色を白・薄グレー中心に整理 */
.color-area-1,
.color-area-2 {
  background: #f5f5f7 !important;
}

.color-area-3 {
  background: #ffffff !important;
}

/* セクション余白を広めに */
.section-wrap {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

/* -------------------------
   Header / Navigation
   ------------------------- */
#header-container,
.header-container {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none !important;
}

#header,
.header {
  background: transparent !important;
  box-shadow: none !important;
}

span.site-name-text,
.site-name-text,
.logo-text {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #111111 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.navi-in a,
.navi a,
#navi .menu-item > a {
  color: #111111 !important;
  font-weight: 500;
  letter-spacing: 0;
}

.navi-in a:hover,
.navi a:hover,
#navi .menu-item > a:hover {
  opacity: 0.65;
}

/* -------------------------
   Hero / Slider
   ------------------------- */
.sliderbox {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* 画像の見え方を整理 */
.metaslider,
.metaslider .slides,
.metaslider .slides li {
  background: #ffffff !important;
}

.metaslider .slides img {
  width: 100%;
  height: 82vh !important;
  min-height: 620px;
  object-fit: cover !important;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}

/* MetaSliderの暗い帯や余計な背景を消す */
.metaslider::after,
.metaslider .slides::after,
.metaslider .flex-viewport::after,
.metaslider .caption-wrap {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* 波 */
canvas#waveCanvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px !important;
  z-index: 5;
  pointer-events: none;
  display: block;
}

/* 矢印 */
.arrow-down {
  z-index: 6;
  bottom: 5rem !important;
}

.arrow-down span {
  border-color: rgba(255, 255, 255, 0.9) !important;
}

/* -------------------------
   Typography
   ------------------------- */
.heading {
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #111111 !important;
  margin-bottom: 2rem !important;
  padding-bottom: 0.8rem !important;
}

.heading span {
  display: block;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: #6e6e73 !important;
  letter-spacing: 0.02em;
  margin-top: 0.8rem;
}

.heading::after {
  width: 36px !important;
  height: 1px !important;
  background: rgba(17, 17, 17, 0.18) !important;
  border-radius: 999px;
}

/* 本文系 */
.entry-content,
.article,
.post,
.page {
  color: #1d1d1f;
}

/* -------------------------
   Cards / Posts
   ------------------------- */
.entry-card-wrap,
.new-entry-card,
.popular-entry-card,
.widget-entry-card,
.a-wrap,
.related-entry-card-wrap {
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 22px !important;
  overflow: hidden;
}

/* カード全体を静かに */
.new-entry-card,
.popular-entry-card,
.widget-entry-card {
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.new-entry-card:hover,
.popular-entry-card:hover,
.widget-entry-card:hover {
  transform: translateY(-3px);
  opacity: 0.96;
}

/* サムネイル */
.entry-card-thumb,
.new-entry-card-thumb,
.popular-entry-card-thumb {
  border-radius: 18px !important;
  overflow: hidden;
}

.entry-card-thumb img,
.new-entry-card-thumb img,
.popular-entry-card-thumb img {
  border-radius: 18px !important;
  object-fit: cover;
}

/* 記事タイトル */
.entry-card-title,
.new-entry-card-title,
.popular-entry-card-title {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  color: #111111 !important;
  letter-spacing: -0.01em;
}

/* -------------------------
   Buttons
   ------------------------- */
.link-btn {
  text-align: center;
}

.link-btn a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  width: auto;
  padding: 0.9rem 1.6rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 17, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #111111 !important;
  font-weight: 500;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.link-btn a:hover {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  opacity: 1 !important;
}

.link-btn a:after {
  border-color: currentColor !important;
  right: 18px !important;
}

/* -------------------------
   TOC
   ------------------------- */
.toc {
  background: #fbfbfd !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: 1.5rem 1.75rem !important;
}

.toc-title {
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
}

.toc-title:before {
  display: none !important;
}

.toc-content ol li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 0.8em 0 0.8em 1.2em !important;
}

.toc-content ol li:before {
  color: #6e6e73 !important;
}

/* -------------------------
   Footer / Misc
   ------------------------- */
.footer,
#footer {
  background: #f5f5f7 !important;
  color: #6e6e73 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer a,
#footer a {
  color: #3a3a3c !important;
}

/* SNSシェアも控えめに */
.sns-share.ss-bottom .sns-buttons a {
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff !important;
}

.cat-label {
    position: absolute;
    top: 0.4em;
    left: 0.4em;
    border: 1px solid #eee;
    font-size: 10px;
    color: var(--cocoon-white-color);
    background-color: rgba(51, 51, 51, 0.7);
    padding: 1px 5px;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* -------------------------
   Mobile
   ------------------------- */
@media screen and (max-width: 834px) {
  .section-wrap {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .metaslider .slides img {
    height: 72svh !important;
    min-height: 520px;
  }

  span.site-name-text,
  .site-name-text,
  .logo-text {
    font-size: 1.5rem !important;
  }

  .heading {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .link-btn a {
    min-width: 180px;
    padding: 0.85rem 1.4rem !important;
  }
}

@media screen and (max-width: 480px) {
  .metaslider .slides img {
    height: 78svh !important;
    min-height: 480px;
  }

  canvas#waveCanvas {
    height: 64px !important;
  }

  .arrow-down {
    bottom: 4rem !important;
  }
}