/*
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;
}
}