@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*投稿ページ文字色*/
.entry-content {
	color: #000000;
}

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

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

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

/************************************
** ホバー時の背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #f0f8ff; /*背景色*/
transition: all 0.8s ease; /*アニメーション*/
color: #333; /*フォントカラー*/
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #00bfff;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*タグクラウド・カスタマイズ*/
.tagcloud a {
background: none; /*背景を消す*/
border: 1px solid #ccc; 
border-radius: 20px; /*角の丸み*/
color: #555; /*文字色*/
display: inline-block;
padding: 3px 10px;
padding-bottom:1px;
text-decoration: none;
font-size: 13px;
margin: 2px;
flex: 1 1 auto;
display: flex;
justify-content: space-between;
}
.tagcloud a .tag-caption::before {
padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
background: #72c7e6;
border: 1px solid #72c7e6;
color: #fff;
transition: 0.5s; /*アニメーションの時間*/
}

/*記事一覧マウスホバー時ふわっと影*/
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
}

/*ヘッダーバー*/
.header-text {
display: flex;
justify-content: center;
width: 100%;
height:30px;
font-size: 13px;
padding-top:2px;
color: #ffffff;
background-color: #004363;
}
.header-text-inner {
display: flex;
justify-content: center;
width:360px;
margin-top:2px;
}

/**目次**/
.toc {
display: block;
padding: 0px;
width:100%;
border: 1.2px #6ec4db solid !important;
font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
position: relative;
padding-top:7px;
padding-bottom:11px;
background: #6ec4db;
color: #fff;
font-weight: bold;
}
.toc .toc-content {
padding: 15px 20px;
background-color: #ffffff;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}
.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -15px;
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
.article .toc-list > li li {
list-style: none;
}

/*サイドバー目次 高さ スクロール */
.widget_toc{
max-height: 60vh; /* 目次の高さを調整 */
overflow-y: auto; /* 垂直スクロールバーを有効にする */
}

/*サイドバー目次 リスト番号非表示 */
.sidebar .toc .toc-list> li li{
list-style: none;
}

/*スマホのスライドインメニューを右から出す*/
.navi-menu-content{
left: auto;
right: 0;
transform: translateX(101%);
}

/*目次スマホ用*/
@media screen and (max-width: 750px){

.toc {
margin: 10px 5px;
}
.toc-list > li a {
font-size:13px;
}
.toc-list > li li a {
margin-left: -3px;
}
.toc-list > li li ::before {
margin-left:-5px;
}
}

/************************/
/* TOPページ見出しh6の下に文字 */
/************************/
.article h6{
position: relative;
margin-bottom: 4rem;/*見出し下の余白*/	
color: #000;;
font-weight: bold;
font-size: 26px;
text-align: center; 
}

.article h6::before{
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.3rem 1rem 0.3rem;
background-color: #5472cd;
color: #fff;
font-size: 13px;
text-transform: uppercase;
content: 'new post';
}

/*2番目の見出しh6*/
.article h6.heading-1::before{
content:'Popular post';
}

/*3番目の見出しh6*/
.article h6.heading-2{
padding-top:40px;
}
.article h6.heading-2::before{
content: 'license';
}

/*4番目の見出しh6*/
.article h6.heading-3{
padding-top:15px;
}
.article h6.heading-3::before{
content: 'category';
}

/*5番目の見出しh6*/
.article h6.heading-4::before{
content: 'office365';
}

/*6番目の見出しh6*/
.article h6.heading-5::before{
content: 'category';
}

/*8番目の見出しh6*/
.article h6.heading-7::before{
content:'pick up';
}

/*9番目の見出しh6*/
.article h6.heading-8::before{
content:'recommend';
}

/*11番目の見出しh6*/
.article h6.heading-10::before{
content:'concept';
}

/*TOPページ見出しh6の下に文字ここまで*/

/************************************
** ウィジェットの見出しのカスタマイズ
************************************/
#main .main-widget-label {
color:#333;/*文字色（黒）*/
font-size:24px;
font-weight:600;
}

/************************************
** プロフィールボックス
************************************/
/* ↓↓ボックスをカード型に */
.author-box {
border-radius: 10px;
box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
background: white;
padding: 0 !important;
border: 0;
}
/* ↑↑ボックスをカード型に */

/* ↓↓背景画像・プロフィール写真 */
/* ↓背景画像の挿入 */
.author-box figure.author-thumb {
position: relative;
float: none;
width: 100% !important;
height: 0;
margin: 0 !important;
padding-top: 45%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: url(https://oshiete-pc.com/wp-content/uploads/2023/02/3214528745.jpg) center no-repeat;
background-size: cover;
text-align: center;
}

/* ↓プロフィール写真 */
.author-box figure.author-thumb img {
position: absolute;
left: 0;
right: 0;
bottom: -35%;
width: 35%;
max-width: 200px;
margin: 0 auto;
border: 3px solid #f0f8ff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

/* ↓↓テキスト部分・SNSボタン */
.author-box .author-content {
margin-top: 13% !important;
}

/*↓作者名（MITSUHIKOの部分） */
.author-box .author-content .author-name {
text-align: center;
font-size: 1.3rem;
}

.author-box .author-content .author-name a {
text-decoration: none;
}

.author-box .author-content .author-name a:hover {
text-decoration: underline;
}
/*↑作者名（MITSUHIKOの部分） */

/*↓プロフィール文 */
.author-box .author-content .author-description p {
max-width: 500px;
margin: 1em auto;
line-height: 1.5 !important;
font-size: 80%;
color:#000000;
}
/*↑プロフィール文 */

/* reCAPTCHA TOPページ非表示 */
.home.page .grecaptcha-badge{
visibility: hidden;
}

/* reCAPTCHA投稿ページ非表示 */
.single .grecaptcha-badge{
visibility: hidden;
}

/*reCaptchaの位置*/
.grecaptcha-badge { 
bottom: 80px !important; 
}

/* reCAPTCHA カテゴリーページ非表示 */
.category .grecaptcha-badge{
visibility: hidden;
}

/* 矢印風テキストリンク */
.arrowbtn a {
--arrow-color:#333; /* 矢印の色を設定 */
position: relative; /* 疑似要素を位置指定するための基準 */
padding: 0 2em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
right:5%;/* 左側からの矢印の位置 */
color: var(--arrow-color); /* 文字色を矢印の色と統一 */
text-decoration: none; /* 下線を非表示 */
font-size:18px;/*文字のサイズ*/
font-weight:bold;
}
.arrowbtn a::before {
border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
bottom: 0; /* 矢印をボタン下部に配置 */
content: ''; /* 疑似要素でコンテンツを空に設定 */
height: 12px; /* 矢印の高さ */
position: absolute; /* 親要素から相対的に配置 */
left: 0; /* 矢印の位置を左端に */
transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
width: 100%; /* ボタン全体の幅に矢印を合わせる */
transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
left: 10%; /* ホバー時、矢印が右に10%ずれる */
}

/************************************
** カテゴリーのカスタマイズ
************************************/
.widget_categories ul li a{ /*親カテゴリー設定*/
text-decoration: none; /*テキスト装飾無し*/
color: #333; /*文字色*/
font-size: 15px; /*フォントサイズ*/
display: block; /*ブロックボックス生成*/
padding: 4px 4px 2px 10px; /*上下左右空間*/
border-bottom: 1px dashed #dcdcdc; /*親カテゴリー下側にボーダーライン*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
font-family: "Font Awesome 5 Free";
content: "\f07c";
color: #b0c4de;
padding-right: 6px; /*アイコン右側空間*/
}
.widget_categories ul li a:hover::before{ /*親カテゴリーのアイコンのホバー時の色*/
color: #00bfff;
}
.widget_categories > ul > li > a:first-child{ 
border-top: none; /*最初の親カテゴリー上側のボーダー削除*/
}
.widget_categories ul li ul li a{ /*子カテゴリー設定*/
text-decoration: none; /*テキスト装飾無し*/
color: #333; /*文字色*/
display: block; /*ブロックボックス生成*/
padding: 4px 4px 2px 10px; /*上下左右空間*/
border-bottom: 1px dashed #dcdcdc; /*子カテゴリー下側にボーダーライン*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f115";
color: #b0c4de;
padding: 0px 6px 0px 2px; /*アイコン右側空間*/
}
.widget_categories ul li ul li a:hover::before{ /*子カテゴリーのアイコンのホバー時の色*/
color: #00bfff;
}
.widget_categories ul li a .post-count{ /*記事数設定*/
display: inline-block; /*インラインボックス生成*/
float: right; /*右寄せ配置*/
margin-left: 8px; /*右側空間*/
color: #000000; /*文字色*/
background: #dcdcdc; /*背景色*/
font-weight: bold; /*強調フォント*/
font-style: oblique; /*斜体フォント*/
font-size: 12px; /*フォントサイズ*/
white-space: nowrap; /*1つの空白にまとめて表示。折り返し無し。*/
line-height: 1.1; /*行の高さ*/
padding: 3px 10px; /*上下左右空白*/
transform: translate(0px,3px);
text-decoration: none; /*テキスト装飾無し*/
border-radius: 2px; /*角丸コーナー*/
}
.widget_categories ul li a:hover{ /*マウスホバー時設定*/
background: #b0c4de; /*背景色*/
color: #333; /*文字色*/
transition: all 0.8s ease; /*アニメーション*/
}
.widget_categories ul li a:hover .post-count{ /*記事数のマウスホバー時設定*/
background: #00bfff; /*背景色*/
color: #fff; /*文字色*/
transition: all 0.8s ease; /*アニメーション*/
}

/*新着記事・ウィジェット 投稿日・更新日表示*/
.widget-entry-card-date {
display: block;
font-size: 11px; /*フォントサイズ*/
}

/*記事エントリーカード日付の文字のサイズ*/
.post-date,
.post-update {
font-size:11px;
}

/**************************
 タブ切り替え
***************************/
/*親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:5px 0;
}

/*タブlabelのスタイル*/
.tab-label {
color: White;
background-color:lightgray;
text-align: center;
padding: .5em 1em;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
border-radius: 2px;
position: relative;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
margin-right: 5px;
}

/*タブのコンテンツ部分*/
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
transform: translate(5px);
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
background-color:#004363;/*背景色*/
}
.tab-switch:checked+.tab-label:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top:10px solid #999fad;
width: 0;
height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px 0 0 0;
opacity: 1;
transition: .5s opacity;
}

/*ラジオボタン非表示 */
.tab-switch {
display: none;
}

/*TOPページMOREボタン*/
.more-btn{
padding-top:20px;
}
.more-btn a{
--more-btn-color:#5472cd; /*ボタンの色はここで設定*/
display:block; /*ブロック要素にする*/
margin:auto; /*ボタン中央寄せ*/
width: 200px; /*ボタンの幅*/
border:1px solid var(--more-btn-color); /*枠線の太さ・種類・色*/
padding: 0.5em 2em; /*ボタンの高さ*/
color:#5472cd; /*文字の色*/
border-radius:1px; /*角の丸み*/
text-decoration: none; /*リンクの下線を消す*/
text-align: center;/*文字の中央寄せ*/
margin-left: auto;
margin-right: auto;
transition: all .3s; /*なめらかな動きに*/
}

/*MOREボタンをマウスオーバー時に反転させる*/
.more-btn a:hover{
background:initial;
color:#fff;
background:var(--more-btn-color); /*ボタンの色*/
}
/***TOPページMOREボタンの設定ここまで***/

/************************/
/*銀色の 光るボタン */
/************************/
.c-button7 {
display: block;
position: relative;
padding: 0.5em 1em;
background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
background-image: linear-gradient(-45deg, #ccc 0%, #d8dcdc 20%, #d8dcdc 34%, white 53%, #ccc 100%);
box-shadow: 0 3px 0 0 #696969;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
max-width:150px;
color: #000;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 300ms;
}
.c-button7::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #f5f5f5;
transition: 300ms;
animation: shinyshiny 2.5s ease-in-out infinite;
}

.c-button7:hover {
text-decoration: none;
color: #0000cd;
box-shadow: none;
-webkit-transform: translateY(3px);
}

@-webkit-keyframes shinyshiny {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*日付非表示【HOME】*/
.post-26393 .date-tags {
display: none;
}

/*日付非表示【プロフィール】*/
.post-116 .date-tags {
display: none;
}

/*日付非表示【お問合せ】*/
.post-146 .date-tags {
display: none;
}

/*日付非表示【サイトマップ】*/
.post-5995 .date-tags {
display: none;
}

/*日付非表示【プライバシーポリシー】*/
.post-2554 .date-tags {
display: none;
}

/*日付非表示【免責事項】*/
.post-1255 .date-tags {
display: none;
}

/*日付非表示【更新記事】*/
.post-40508 .date-tags{
display:none;
}

/*日付非表示【Windows11】*/
.post-24815 .date-tags {
display: none;
}

/*固定ページ日付非表示【Microsoft-Office】*/
.post-24975 .date-tags {
display: none;
}

/*パララックス全幅表示*/
.entry-content .wp-block-cover,
.entry-content .wp-block-cover-image {
margin: 0 calc((100% - 100vw)/2) 1.5em;
width: auto;
margin-bottom:35px;
}

/*サイドバー見出しカスタマイズ*/
.sidebar h3 {
background: none;
padding: 0;
font-size: 18px;
letter-spacing: 2px; 
}
.sidebar h3:first-letter {
font-size: 1.5em;
}
.sidebar h3:after {
content:"";
display:block;
height:3px;
width:100%;
background: -webkit-linear-gradient(left, #5472cd 0%,#dadada 50%);
background: linear-gradient(to right, #5472cd 0%,#dadada 50%);
}

/************************/
/* ブログカードのラベル色 */
/************************/
/*あわせて読みたい*/
.bct-together .blogcard-label{
background-color:#4457b0;
}
/*関連記事*/
.bct-related .blogcard-label{
background-color:#993300;
}
/*参考記事*/
.bct-reference .blogcard-label{
background-color:#21873a;
}
/*参考リンク*/
.bct-reference-link .blogcard-label {
background-color: #ff8c00;
}
/*人気記事*/
.bct-popular .blogcard-label {
background-color: #ef4056;
}
/*詳細はこちら*/
.bct-detail .blogcard-label{
background-color:#4467b0;
}
/*詳細はこちら*/
.bct-detail .blogcard-label{
background-color:#696969;
}
/*ピックアップ*/
.bct-pickup .blogcard-label{
background-color:#00a300;
}
/*公式サイト*/
.bct-official .blogcard-label{
background-color:#000000;
}
/*ダウンロード*/
.bct-dl .blogcard-label{
background-color:#21873a;
}

/*ボックスメニューの色*/
.box-menu-icon{
color: #ff8c00;
}

.box-menu:hover {
box-shadow: inset 2px 2px 0 0 
#708090,2px 2px 0 0 #708090,2px 0 0 0 #708090,0 2px 0 0
#2ca9e1;
} 

/* ボックスメニューホバー時拡大 */
.box-menu {
overflow: hidden;
transition: all .1s;
}
.box-menu:hover {
transform: scale(1.1);
transition: all .1s;
}

/*SNSシェアボタンを画面の左縦方向中央に固定*/
.article-header .sns-share {
display: block;
left: min(1.71vw, 60px);
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}

/*各アイコンを正方形に収める*/
#main .article-header .sns-share a {
height: 40px;
width: 40px;
}

/*Twitterなどのキャプション削除*/
.sns-share.ss-high-and-low-lc a .button-caption {
display: none;
}

/*各アイコンの大きさ調整*/
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 24px;
}

/*各アイコンの枠線と背景色を透明に*/
#main .article-header .bc-brand-color-white.sns-share [class*="-button"] {
border: none;
background-color: transparent;
}

/*SNSボタンを縦方向に並べる */
.article-header .sns-share-buttons {
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
padding: 1rem 0;
gap: 0.2rem;
}

/*各アイコンにホバー時の拡大アニメーション */
.article-header .sns-share-buttons a {
transform: scale(1);
transition: transform .3s ease-in-out;
}

.article-header .sns-share-buttons a:hover {
transform: scale(1.2);
}

/*1400px以下*/
@media screen and (max-width: 1400px) {
/* header SNS button vertical -> horizontal */
.article-header .sns-share {
display: block;
left: unset;
position: static;
top: unset;
transform: none;
}

.article-header .sns-share-buttons {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 1rem 0;
gap: 1rem;
}

.article-header .sns-share-buttons a {
margin-bottom: 0;
}
}

/*834px以下*/
@media screen and (max-width: 834px) {
/* header SNS button  */
#main .article-header .sns-share a {
height: 32px;
width: 32px;
}

/*各アイコンの大きさ調整*/
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 20px;
}
}

/*480px以下*/
@media screen and (max-width: 480px) {
/* header SNS button  */
#main .article-header .sns-share a {
height: 20px;
width: 20px;
}

/*各アイコンの大きさ調整*/
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 16px;
}
}

/*左上にずらした背景色ありタイトルこの記事を書いた人MITSUHIKO*/
.box75{
margin: 2em auto; /* ボックスの余白 */
background-color: #fafafa; /* ボックス背景色 */
padding:3em 3em 1em;/* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
font-size:15px;
}
.box75 .box-title5 {
background-color:#5a728b; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/* 配置(ここを動かす) */
top: -10px; /*上から（0px）移動*/
left: 20px; /*左から(0px)移動*/
}
.box75 img{
max-width: 100%;
height: auto;
margin-right:40px;
margin-top:15px;
display: block;
}

/*左上にずらした背景色あり囲い枠・特典のご案内*/
.box76{
margin: 2em auto; /* ボックスの余白 */
background-color: #fafafa; /* ボックス背景色 */
padding:3em 3em 1em;/* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
font-size:15px;
}
.box76 .box-title5 {
background-color:#5a728b; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/* 配置(ここを動かす) */
top: -10px; /*上から（0px）移動*/
left: 20px; /*左から(0px)移動*/
}
.box76 img{
max-width: 100%;
height: auto;
margin-right:40px;
margin-top:15px;
display: block;
}

/*パソコン講座の案内を特定のページで非表示*/
.postid-13802 .box76{
display:none;
}