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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

body{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","verdana",sans-serif;
	background-color:White;
}

.top_img{
	text-align:center;
	background-color:#004bbc;
}

.top2_img{
text-align:center;
	background-color:#004bbc;	
}

.navi{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","verdana",sans-serif;
	font-weight:bold;
}


.widget_media_image{
	text-align:center;
}

.author-box{
	background-color:white;
}

.author-thumb{
	padding-top:20px;
		padding-bottom:10px;
}

a{
	text-decoration:none;
	color:#4169e1;
}

.author-name{
	font-family:凸版文久見出しゴシック;
	padding:0px;
}


.author-description { /*プロフィール情報*/
  word-break: break-all; /*表示範囲に合わせて改行*/
	font-size: 12px; /*フォントサイズ*/
font-weight:bold;
}
	
.author-box p {
  margin-top: 0.3em;
  line-height: 2.0;
}
.author-follows{
	padding-bottom:20px;
}

.author-box .author-name {
 margin-top: 0;
	padding-top: 0;
	padding-bottom:10px;
}

.nwa .author-content {
  margin-top: 0;
	padding-top: 0em;
}
.nwa .author-box .author-content {
  margin: 0;
  padding: 0em;
}
.nwa .author-box .author-thumb {
  float: none;
  width: 100px;
  margin: 0px auto 0;
}



/*新着記事一覧をおしゃれにする簡単カスタマイズ*/
.ect-vertical-card .entry-card-wrap{
    max-width: 49%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 3px;
    padding:0;
}
@media screen and (max-width:480px){
    .ect-vertical-card .entry-card-wrap{
        max-width: 46%;
    }
    .e-card-title {
        font-size: 13px;
    }
}
.entry-card-title{
    color: royalblue; /*見出しの色*/
    line-height: 1.6;
	font-size:15px;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
    margin: 8px 12px 9px 12px;
}
.entry-card-meta, .related-entry-card-meta {
    color: #b7b7b7;
    margin: 4px 8px;
}

.ect-vertical-card {
    justify-content: space-around;
}

.list-title-in{
	color: royalblue;/*文字の色*/
	font-size: 18px;/*文字の大きさ*/
}

.list-title-in:before, .list-title-in:after {
	background-color: royalblue;/*線の色*/
	top: 40%;/*線の高さ*/
}






/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

.entry-content h2 {
  border-bottom: solid 3px turquoise;
  position: relative;
}

.entry-content h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px deepskyblue;
  bottom: -3px;
  width: 20%;
}

.entry-content h3 {
  position: relative;
  margin-bottom: 1.5em;
}
.entry-content h3:before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 250px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: royalblue;
  border-radius: 2px;
}

.fz-36px,カテゴリ別の最新記事 {
	color:royalblue;
	font-size:25px;
}

.entry-content h4 {
  padding: 0.7em;/*文字周りの余白*/
  color: white;/*文字色*/
  background: royalblue;/*背景色*/
  border-left: solid 10px lightskyblue;/*左線（実線 太さ 色）*/
	font-size:25px;
}

 h3.widget-sidebar-title {
    color: white;                      /* 文字色 */
    background: royalblue;                 /* 背景色 */
    padding: 0.25em 0.6em;               /* [上下][左右]の余白 */
    border-top: none;                    /* 上枠 */
    border-right: none;                  /* 右枠 */
    border-bottom: none;                  /* 下枠 */
    border-left: solid 10px lightskyblue;      /* 左枠 */
  }

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    padding:5px;
    box-sizing: border-box;
	border: border-box;
	margin:10px;
	
}
.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;	
   
}
.new-entry-cards.large-thumb a {
	border: solid 1px;
	padding:5px;
	margin:4px;
	width:45.5%;
	height:350.89px;
}

/**********************************************
** エントリーカードデザイン
**********************************************/

.new-entry-card-title{
	font-size:16px;
	color:#0095d9;
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","verdana",sans-serif;
}

.new-entry-card-snippet{
	font-size:12px;
	color:dimgray;
}





/**********************************************
** カルーセル
**********************************************/

.card-title{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","verdana",sans-serif;
	font-size:16px;
	
}



/* サイト内検索 */
.search-edit, input[type="text"] {
   border-color: royalblue; /* 線の色 */
}
[type=submit].search-submit {
    color: #a4e8e6; /* 文字の色 */
}

/*ここまで*/


#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
	margin-bottom:8px;
	margin-top:8px;
}

.carousel-in{
	padding-top:10px;
}

/*1番左と2番目の仕切り線*/
#navi .navi-in > ul li{
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
}

/*左から3番目以降の仕切り線*/
#navi .navi-in > ul li + li{
	border-right: 1px solid #ffffff;
	border-left: none;
}

/*サブメニューの仕切り線は無し*/
#navi .navi-in > ul ul li{
	border-right: none;
	border-left: none;
}

/**********************************************
** 「v」マークの削除
**********************************************/

.navi-in .has-icon {
  display:none;
}

/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：スケルトン*/
/*ここから*/
.cat-label {
	padding: 1px 10px;
	background-color: rgba(51, 51, 51, 0.5);
	border: 0;
	border-radius: 30px;
}
/*ここまで*/

.btn{
	width:450px
}

.footer-bottom-logo img{
	height:83px;
}





/* ↓SNSボタン 形など*/
.author-box .author-follows .sns-buttons a.follow-button {
  border-radius: 50%;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  margin-bottom: .5em;
  margin-right: .5em;
  border: none;
  color: white;
}
/* ↑SNSボタン 形など*/


/* ↓マウスオーバー時の動き */
.author-box .author-follows .sns-buttons a.follow-button:hover {
  box-shadow: 0;
  transform: translateY(-2px);
  transition: all .3s ease;
}
/* ↑マウスオーバー時の動き */


/* ↓SNSボタン 中のアイコン */
.author-box .author-follows .sns-buttons a.follow-button span {
  line-height: 40px;
}

.author-box .author-follows .sns-buttons a.follow-button span::before {
  font-size: 20px !important;
}
/* ↑SNSボタン 中のアイコン */


/* ↓SNSボタン 背景色 */
.author-box .bc-brand-color.sns-follow .twitter-button {
  background-color: #7dcdf7 !important;
}

.author-box .bc-brand-color.sns-follow .github-button {
  background-color: #4078c0 !important;
}

.author-box .bc-brand-color.sns-follow .facebook-button {
  background-color: #7c9dec !important;
}

.author-box .bc-brand-color.sns-follow .hatebu-button {
  background-color: #2c6ebd !important;
}

.author-box .bc-brand-color.sns-follow .instagram-button {
  background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;
}

.author-box .bc-brand-color.sns-follow .line-button {
  background-color: #00c300 !important;
}

.author-box .bc-brand-color.sns-follow .website-button {
  background-color: #6eb6fd !important;
}

.author-box .bc-brand-color.sns-follow .youtube-button {
  background-color: #cd201f !important;
}
/* ↑SNSボタン 背景色 */


/*---------------------------------
お問い合わせの送信ボタン
--------------------------------*/
input[type='submit']{
	background:royalblue;
	color:white;
	font-size:15px;
	font-weight:bold;
}



/*---------------------------------
カテゴリーに線だけを入れる
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

.widget_categories ul li a:hover { /*マウスホバー時*/
    background: #444d53;
    transition: 0.5s;
    color: #fff;
}




/************************************
** ブログカード（本文挿入）
***********************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: royalblue;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}



/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:royalblue;/*検索マーク色変更はこちら*/
}
span.fas.fa-bars::before{
color:royalblue;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}



/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:royalblue;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted royalblue; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none;
}
}

/************************************
**PC版とモバイル版でロゴ分ける
************************************/

/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	.logo-menu-button img{
		visibility: hidden;
	}
}

/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(https://linkstudio-blog.com/wp-content/uploads/2022/07/ロゴ.png);
		background-size: auto 80px;
		background-position: center;
		background-repeat: no-repeat;
}
}