@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%出す*/
}

/* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */
.menu-header .menu-item:hover .sub-menu {
  display: block;
}

/*タグクラウド・カスタマイズ*/
.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:25px;
 font-size: 13px;
 padding-top:2px;
 color: #ffffff;
 background-color: #000080;
}
.header-text-inner {
 display: flex;
 justify-content: center;
 width:360px;
}

/**目次**/
.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: 70vh; /* 目次の高さを調整 */
	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';
}

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

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

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

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

/*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: 70px !important; 
}

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

/* 矢印風テキストリンク */
.arrowbtn a {
 --arrow-color:#333; /* 矢印の色を設定 */
 position: relative; /* 疑似要素を位置指定するための基準 */
 padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
 color: var(--arrow-color); /* 文字色を矢印の色と統一 */
 text-decoration: none; /* 下線を非表示 */
 font-size:18px;/*文字のサイズ*/
}

.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 #00bfff; /*親カテゴリー下側にボーダーライン*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
  font-family: "Font Awesome 5 Free";
  content: "\f07c";
  color: #00bfff;
  padding-right: 6px; /*アイコン右側空間*/
}
.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 #00bfff; /*子カテゴリー下側にボーダーライン*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f115";
  color: #00bfff;
  padding: 0px 6px 0px 2px; /*アイコン右側空間*/
}

.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;
}

/*固定ページ日付非表示【HOME】*/
.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;
}

/*PCHackの特典の案内を特定のページで非表示*/
.postid-8941 .box75{
display:none;
}

/*PCHackの特典の案内を特定のページで非表示*/
.postid-7423 .box75{
display:none;
}

/*PCHackの特典の案内を特定のページで非表示*/
.postid-9951 .box75{
display:none;
}

/*左上にずらした背景色あり囲い枠・特典のご案内*/
.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;
}

/*PCHackの特典の案内を特定のページで非表示*/
.postid-13802 .box76{
display:none;
}

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