@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*プロフィールボックスの設定*/
.author-box {
    border: none;/*外側の枠線を消す*/
}
/* 矢印の配置（スクロールダウン）---------------------- */
.scrolldown{
	--arrow-color:#333;/*矢印の色はここで指定*/
	position:absolute;/*矢印の配置*/
	left: 50%;/*適宜調整*/
	/*矢印の動き2秒かけて永遠にループ*/
	animation: arrow-moving 2s ease-in-out infinite;
}

/*全体が下→上→下に動くアニメーション*/
@keyframes arrow-moving{
	0%{bottom:1%;}
	50%{bottom:3%;}
	100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:65px;/*適宜調整*/
    /*テキストの形状*/
	color:var(--arrow-color);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown:before,
.scrolldown:after{
	content: "";
	position: absolute;/*描画位置*/
	bottom: 50px;/*適宜調整*/
	width: 1px;/*矢印の形状*/
	background:var(--arrow-color);/*矢印の色*/
}

.scrolldown:before {
	right: -6px; /*適宜調整*/
	height: 20px; /*矢印の形状*/
	transform: skewX(-31deg);/*X軸の傾斜角度*/
}

.scrolldown:after{
	right:0; /*適宜調整*/
	height: 50px;/*矢印の高さ*/
}
/* 親要素の背景画像を読み込み時に5秒かけて縮小 */
.appeal {
    animation: zoomOut 5s ease forwards; /* 縮小アニメーション */
}

/* 背景画像縮小アニメーション（デフォルト） */
@keyframes zoomOut {
    from {
        background-size: 120%; /* 初期サイズ（拡大された状態） */
    }
    to {
        background-size: 100%; /* 元のサイズ */
    }
}

/* レスポンシブ対応: 1240px以下の場合 */
@media screen and (max-width: 1240px) {
    /* 背景画像縮小アニメーション（小画面用） */
    @keyframes zoomOut {
        from {
            background-size: auto 120svh; /* 初期サイズ（拡大された状態） */
        }
        to {
            background-size: auto 100svh; /* 元のサイズ */
        }
    }
}
/*ヘッダーモバイルボタン・フッターモバイルボタン*/
@media screen and (max-width: 1023px) {
	.mblt-header-and-footer-mobile-buttons{
		margin-top: 0;/*上部の余白46pxを消す*/
	}
	.front-top-page .mobile-menu-buttons {
		background-color: initial;/*背景を初期化して透明に*/
		box-shadow: none;/*影を消す*/
	}
}
/* アピールエリアカスタマイズ---------------------------------------------- */

/* ヘッダー（トップページのみ固定）---------------------------------------------- */
.front-top-page .header-container {
	 position: fixed; /* ヘッダーを固定する */
	 z-index: 9; /* ヘッダーを最前面に配置 */
	 width: 100%; /* ヘッダー幅を画面いっぱいに設定 */
}

.front-top-page .header-container,
.front-top-page .navi,
.front-top-page .navi-in a:hover {
	background-color: initial; /* ヘッダーの背景色をリセット */
}


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

.appeal-in {
	height: 100%; /* アピールエリア内の高さを全体に設定 */
	width: 100%; /* アピールエリア内の幅を全体に設定 */
	background-color: rgb(255 255 255 / .3); /* 背景に白の半透明を設定 */
	backdrop-filter: blur(5px); /* 背景をぼかす（5px） */
}

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


/* 矢印の配置---------------------------------------------- */
.arrow-down {
	position: absolute; /* 矢印を絶対位置で配置 */
	bottom: 5em; /* 矢印をエリアの下から5emに配置 */
	left: calc(50% - .5em); /* 中央寄せにする */
}

/* 矢印のスタイル */
.arrow-down span {
	display: block; /* 矢印をブロック要素として表示 */
	line-height: 1; /* 行の高さを1に設定 */
	width: 1em; /* 矢印の幅を1emに設定 */
	height: 1em; /* 矢印の高さを1emに設定 */
	border: 1px solid black; /* 矢印の枠線を黒で設定 */
	border-left: 0; /* 左枠線を削除 */
	border-bottom: 0; /* 下枠線を削除 */
	box-sizing: border-box; /* パディングとボーダーを含めたサイズ指定 */
	transform: translateY(-25%) rotate(135deg); /* 矢印の位置と向きを調整 */
}

/* Scrollの文字 */
.arrow-scroll {
	display: block; /* Scroll文字をブロック要素で表示 */
	position: absolute; /* 絶対位置で配置 */
	bottom: 4em; /* 下から4emに配置 */
	left: 50%; /* 横方向の中央に配置 */
	transform: translateX(-50%); /* 中央寄せを調整 */
	-webkit-transform: translateX(-50%); /* WebKitブラウザ用調整 */
	-ms-transform: translateX(-50%); /* IE用調整 */
	font-size: 14px; /* フォントサイズを14pxに設定 */
}

/* アニメーション追加 */
.arrow-anime {
	animation: arrow-move 2s ease infinite; /* 2秒で繰り返すアニメーションを適用 */
}

/* 矢印の動き（高さ・透過が変化） */
@keyframes arrow-move {
	0% {
		transform: translateY(-50px); /* 矢印を上に移動 */
		opacity: 1; /* 不透明 */
	}
	100% {
		transform: translateY(0px); /* 矢印を元の位置に戻す */
		opacity: 0; /* 消える */
	}
}
/*必要ならばここにコードを書く*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.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: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.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以降の文字サイズを普通に */
}