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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ヘッダー ------------------------------------------------------------------------------------------------ */
.header-in {
/*   position: relative; */
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding: 12px 20px;
}
.header-in .search-box {
  margin: 0;
  width: 280px;
}
.header-in input[type="text"] {
  padding: 8px 20px;
  font-size: 14px;
  background-color: #E9E9E9;
  border-radius: 50px;
}
.header-in .search-submit {　/* 虫眼鏡アイコンの設定 */
	position: absolute;
    right: 6px;
    top: calc(50% - 10px);
    font-size: 16px;
    cursor: pointer;
    border: none;
    padding: 0 8px;
	color: #6C6C6C;
}
.header-container-in.hlt-top-menu .header {
    background-image: none;
    /* width: 1180px; */
    width: 100%;
}
.header-container-in.hlt-top-menu .wrap {
    width: 100%;
}
.cf::after {　　/* 「cf」クラス（floatを使ったレイアウトの崩れを防ぐためのCSS）のせいで透明なブロックが存在していたので非表示にする。 */
    clear: both;
    content: "";
    display: block;
	display: none;
}
.header-container, .main, .sidebar, .footer {　/* カラムの背景色変更 */
    background-color: var(--cocoon-white-color);
	background-color: #F8F8F8;
}
.site-name-text-link {
    padding: 0 1em 0 0;
}

/* ここからメイン画像上のメッセージ ---------------------------------------------------------------------------- */
.appeal-content {
    max-width: 1180px;
    background-color: transparent;
/*     margin: auto; */
	margin: 0;
    padding: 2em;
    text-align: left;
    border-radius: var(--cocoon-basic-border-radius);
    display: block;
}
.appeal-title {
	font-size: 1.3rem;
}
.appeal-message {
	margin: 10px 0 0;
}
.appeal-in {
    padding: 3% 0;
}
@media screen and (max-width: 1023px){
	#header-container {
	display: none;
	}
	.appeal-message {
    	font-size: 14px;
	}
	.appeal-in {
    	min-height: 500px;
	}
}

/* ここからハンバーガーバーメニュー ---------------------------------------------------------------------------- */
.mobile-menu-buttons .menu-button {
    position: relative;
    width: auto;
    cursor: pointer;
/* 	display:block; */
	justify-content: start;
}
.mobile-menu-buttons .menu-button > a {
    width: 110px;
}
.mobile-header-menu-buttons {
        padding: 10px 20px;
}
.mobile-menu-buttons .menu-icon {
    font-size: 22px;
}
.menu-content {
    background: #F8F8F8;
}
.menu-close-button {
    display: block;
    cursor: pointer;
    text-align: right;
    padding: 0 16px;
}

.fa-outdent:before {
    content: "\f0c9";
	margin-left: 22px;
}
/* .fa-times:before {
    content: "\f00d";
	padding-right: 5px;
} */
.mobile-menu-buttons .menu-caption {
	display: none;
}
@media screen and (max-width: 1023px){
	.fa-search:before {
    content: "\f002";
	font-size: 22px;
	}
}
/* ここからカラム ---------------------------------------------------------------------------- */
/* ［カラム］新着記事カテゴリの表示をデザインに合わせる */
.info-list-item-categorys .entry-category {
    padding: 1px 18px;
    margin-right: 8px;
    border: none;
    height: 20px;
    line-height: 17px;
    display: inline-block;
    border-radius: 50px;
    background-color: #E6E6E6;
	font-size: 10px;
}
/* 記事詳細>関連記事の日付とカテゴリに透明の設定が付いているので削除 */
.info-list-item-meta {
    font-size: 12px;
    opacity: 1;
    line-height: 20px;
}
/* TOP>新着記事の日付のテキストカラーを調整 */
.info-list-item-date {
    margin-right: 18px;
    color: #6C6C6C;
}

/* タグのデザイン ---------- */
/* タグアイコン */
.fa-tag:before {
    content: "\f02b";
    font-size: 12px;
}
/* タグ同士の幅 */
.tagcloud {
    gap: 10px;
}
/* タグの装飾 */
.tagcloud a {
    border-radius: 2px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    margin: 0px;
    flex: 0 0 auto;
	display:block;
	border: 1px solid #999;
	padding: 4px 9px;
}
/* タグホバー時のデザイン変更 */
.tagcloud a:hover, 
.entry-tags a:hover {
  color: #000;
  background-color: #E6E6E6;
  transition: all 0.3s ease-in-out;  /* スムーズな変化 */
}
/* タグのホバー時に tag-caption の色が変わらないようにする */
.tagcloud a:hover .tag-caption, 
.entry-tags a:hover .tag-caption {
  color: inherit;  /* 親要素の色を維持する */
}
/* タグの色調整 */
.entry-categories-tags .tax-icon, .fa-tag:before {
	color: #787878;
}

/* カラムここまで ---------------------------------------------------------------------------- */

/* ここからフッター ---------------------------------------------------------------------------- */
#footer {
	margin-top: 100px;
    padding: 30px 0 12px 0;
}
.footer-mobile, .footer-left, .footer-center, .footer-right {
	padding: 0;
    text-align: center;
}
.footer-widgets, .footer-widgets-mobile {
    margin: 0 auto;
}
.footer-bottom {
    margin-top: 0px;
    padding: 0px;
    position: relative;
    font-size: 14px;
}
#footer, #footer a:not(.sns-button), .footer-title {
	text-decoration: none;
}
 #footer a:not(.sns-button):hover, .footer-title:hover {
    background-color: transparent;
}
.footer-button {
  display: block;
  width: 100%;
  position: relative;
  overflow-wrap: break-word;
  &::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 275px;
    top: 54%;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  &.footer-tab::before {
    background-image: url("https://portal-test.cosmocomputing.com/system/wp-content/uploads/2025/02/別タブicon_wh.png");
  }
}
@media screen and (max-width: 767px){
	#footer {
		margin-top: 0px;
	}
}
/* フッターここまで ---------------------------------------------------------------------------- */
.appeal-content {
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0);
    margin: 0 auto;
    padding: 0;
    text-align: left;
    border-radius: 0px;
    display: block;
}
.appeal-in {
    display: flex;
    padding: 3%;
}
.page-id-19 #breadcrumb {
  display: none;
}
.page-id-19 #content {
  margin-top: 160px;
}

/* ここから記事一覧の調整 ---------------------------------------------------------------------------- */
/* ボックス自体のサイズ調整 */
.a-wrap {
    text-decoration: none;
    display: block;
    color: var(--cocoon-text-color);
    padding: 0px;
    transition: all 0.3sease-in-out;
}
.list {
    display: flex;
    flex-direction: column;
    row-gap: 2.5em;
}
@media screen and (max-width: 1023px){
	.list {
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
	}
}
@media screen and (max-width: 480px){
	.list {
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
	}
}

/* カテゴリをfigmaのデザインにする */
.cat-label {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    font-size: 10px;
    color: #fff;
    background-color: #E6E6E6;
    padding: 5px 20px;
    border-radius: 100px;
    width: auto;
	max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
	margin-left: 210px;
}
/* 画像のサイズをfigmaに合わせる */
.carousel-entry-card-thumb, .related-entry-card-thumb, .widget-entry-card-thumb, .entry-card-thumb {
    float: left;
    margin-top: 0px;
    position: relative;
    margin-bottom: 0px;
}
.entry-card-thumb, .author-thumb, .blogcard-thumbnail, .related-entry-card-thumb, .popular-entry-card-thumb, .new-entry-card-thumb {
    margin-right: 20px;
}
.entry-card-thumb {
    width: 190px;
}
.card-thumb img {
    width: 100%;
    height: 140px;
}
.entry-card-content {
    margin-left: 0px;
}
.related-entry-card-content, .entry-card-content {
    padding-bottom: 0px;
}

/* タイトルの長さ/フォントサイズを調整 */
.related-entry-card-title, .entry-card-title {
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
@media screen and (max-width: 1023px){
	/* カテゴリをfigmaのデザインにする */
	.cat-label {
    	padding: 5px 10px;
    	border-radius: 100px;
		margin-left: 150px;
	}
	/* 画像のサイズをfigmaに合わせる */
	.entry-card-thumb {
    	width: 130px;
	}
	.card-thumb img {
    	width: 100%;
    	height: 100px;
	}
	/* タイトルのサイズを調整 */
	.related-entry-card-title, .entry-card-title {
    	font-size: 14px;
    	margin: 0;
    	line-height: 1.4;
    	-webkit-line-clamp: 2;
	}
}
@media screen and (max-width: 480px){
	/* タイトルの長さ/フォントサイズを調整 */
	.related-entry-card-title, .entry-card-title {
    	font-size: 18px;
    	line-height: 1.2;
    	font-weight: 400;
    	display: -webkit-box;
    	overflow: hidden;
    	-webkit-box-orient: vertical;
	}
}
/* タイトルの位置修正 */
.related-entry-card-content, .entry-card-content {
    /* padding-bottom: 0px; */
    padding-top: 40px;
}
@media screen and (max-width: 1023px){
	/* タイトルの位置修正 */
	.related-entry-card-content, .entry-card-content {
    	padding-top: 35px;
	}
}
/* 投稿日の位置修正 */
.related-entry-card-meta, .entry-card-meta {
    /* bottom: 0px; */
    position: absolute;
    right: 0;
    top: 2px;
    /* text-align: right; */
    /* line-height: 1; */
}
/* 投稿日のアイコン非表示にする */
.fa-clock:before {
    content: "\f017";
    display: none;
}
/* 投稿日の色を調整（記事詳細ページも変わる） */
.entry-date {
    color: #6C6C6C;
}
/* 投稿日の右パディングを消す（記事詳細ページも変わる） */
.post-date {
    margin-right: 0px;
}
/* ［記事一覧］ホバーの色削除 */
.a-wrap .entry-card-title:hover{
    color: #2B55A0;
	background-color: transparent;
	text-decoration: underline;
	transition: 0.3s;
}
/* ［記事一覧］タグの装飾を調整 */
.tag-link, .comment-reply-link {
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 7px;
    font-size: 10px;
    border: 1px solid var(--cocoon-x-pallid-text-color);
    border-radius: var(--cocoon-badge-border-radius);
    word-break: break-all;
}
/* ［記事一覧］タグのホバーを調整 */
.tag-link:hover {
    border: 1px solid #2B55A0;
}
/* ［記事一覧］タグが画像の下に回り込まないようにする */
.entry-categories-tags {
    margin-bottom: 0px;
    overflow: hidden;
}
.entry-tags .fa-tag:before {
    content: "\f02b";
    font-size: 10px;
}
/* タグの上と下に余白つける */
.entry-categories-tags > div {
    margin: 4px 0;
}

/* 記事詳細ページ ------------------------------------------------------------------------------------- */
/* 写真上のカテゴリーを削除 */
.eye-catch .cat-label {
	display: none;
}
/* 関連記事の日付のテキストカラーを調整 */
.e-card-info > span {
    color: #6C6C6C;
}
/* 関連記事のカテゴリの位置調整 */
.under-entry-content .cat-label {
    border-radius: 100px;
    margin-left: 175px;
}
/* カテゴリアイコンのデザイン */
.cat-link {
    color: #000;
    text-decoration: none;
    display: inline-block;
	color: #fff;
	border-radius: 100px;
    margin-right: 5px;
    padding: 4px 20px;
    font-size: 12px;
    background-color: #2B55A0;
    word-break: break-all;
}
@media screen and (max-width: 480px){
	/* カテゴリアイコンのデザイン */
.cat-link {
    display: inline-block;
	border-radius: 100px;
    padding: 5px 10px;
    font-size: 10px;
    background-color: #2B55A0;
    word-break: break-all;
	}
}
/* カテゴリのフォルダアイコンを非表示に */
.entry-categories .fa-folder:before {
    content: "\f07b";
	display: none;
}
/* カテゴリとタグを改行して配置 */
.ctdt-one-row > div {
    display: block;
}
/* 次の記事/前の記事の画像をホバーした際にはみ出ないようにする */
.pager-post-navi a figure {
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
}
/* 動画の幅を自動で100%表示にする */
.video-container {
	max-width: none;
}
/* ［記事詳細］関連記事/次の記事のサムネサイズ調整 */
.under-entry-content .card-thumb img {
    width: 100%;
    height: 120px;
}
@media screen and (max-width: 1023px){
	/* ［記事詳細］SP：メインコンテンツ上の余白調整 */
	main.main, div.sidebar {
        padding: 12px 16px 0;
        margin: 0;
    }
}
@media screen and (max-width: 480px){
	/* 関連記事のカテゴリの位置調整 */
	.under-entry-content .cat-label {
    	margin-left: 150px;
	}
	/* 	［記事詳細］SP：記事タイトルの横幅調整 */
	.entry-title {
        font-size: 20px;
        padding: 0;
		margin: 14px 0 20px 0;
    }
	/* ［記事詳細］関連記事/次の記事のサムネサイズ調整 */
	.under-entry-content .card-thumb img {
    	width: 130px;
    	height: 80px;
	}
}
/* 記事詳細ページここまで ------------------------------------------------------------------------------------- */

/* 全体　------------------------------------------------------------------------------------------------------------ */
/* ［記事詳細］H1が太いので細くする */
.article h1 {
    font-weight: 400;
}
/* H3の装飾 */
.article h3 {
    border-left: 7px solid #2B55A0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    font-size: 22px;
    padding: 12px 20px;
}
/* H4の装飾 */
.article h4 {
    border-top: none;
    border-bottom: none;
    background-color: #E6E6E6;
}
/* h2の文字色を白に */
.article h2 {
	color:  #fff;
}
/* パンくずリストのデザイン修正 */
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
    background-color: transparent;
    margin: 12px auto 0;
    padding: 0 25px;
}
/* パンくずリストの最初のアイコンを非表示にする */
#breadcrumb .fa-home:before, .fa-folder:before, .fa-file:before{
    display: none;
}
#breadcrumb .fa-fw {
    text-align: center;
    width: 0;
}

@media screen and (max-width: 1023px){
	/* 	パンくずリストの上に余白を付ける */
	.breadcrumb.sbp-main-before {
    padding: 24px 2em 0;
	}
	/* 	パンくずリストの記事タイトルを非表示にする */
	.breadcrumb div:last-child {
    	display: none;
  	}
	.breadcrumb-item:nth-last-child(2) .fa-angle-right::before {
    	display: none;
  	}
}
@media screen and (max-width: 834px){
	.breadcrumb.sbp-main-before {
    	padding: 28px 1em 0;
	}
}
.related-entry-card-content h3 {
    padding-top: 0px;
}

/* いいねボタンの装飾　------------------------------------------------------------------------------------------------------------ */
/* 言い値が画像に回り込まないようにする（サムネの下にマージンを付けることで無理やり回り込まないようにした） */
@media screen and (max-width: 1023px){
	.ect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .rect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .ect-big-card-first .a-wrap:not(.ec-big-card-first) .card-thumb {
        margin-bottom: 35px;
    }
}
@media screen and (max-width: 480px){
	.ect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .rect-entry-card .a-wrap:not(.ec-big-card-first) .card-thumb, .ect-big-card-first .a-wrap:not(.ec-big-card-first) .card-thumb {
        margin-bottom: 35px;
    }
}
.wpulike {
    display: block;
    position: relative;
    line-height: normal;
    padding: 0;
}
.wpulike button.wp_ulike_btn {
    margin: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: .25em;
    box-shadow: none;
    padding: 1em;
    font-size: 15px;
    border: none;
    text-align: center;
    transition: none;
    cursor: pointer;
}

/* ハートのデザイン これを入れるとバグる*/

/* いいねの数値のデザイン */
.wpulike-heart .count-box {
    font-size: 12px;
    text-decoration: none;
    line-height: 28px;
    display: inline-block;
    color: #616161;
    text-align: center;
    font-weight: 600;
    vertical-align: middle;
    padding: 0;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media screen and (max-width: 1023px){
	.header-container-in.hlt-top-menu .header {
    	padding: 0 20px;
	}
	.mobile-header-menu-buttons {
        padding: 20px;
    }
	.appeal-in { /* アピールエリアのコメント部分 */
		display: flex;
	    padding: 60px 20px 200px;
	    margin-top: 80px;
	}
	.appeal-in.wrap .appeal-title {
      margin-left: 90px; /* 左マージン */
	  margin-top: 50px;
    }
		  	#header-container {
    	position: relative;
	}
}

@media screen and (max-width: 834px){
	.header-container-in.hlt-top-menu .header {
    	padding: 0 20px;
	}
}

@media screen and (max-width: 480px){
	.appeal-in { /* アピールエリアのコメント部分 */
	    display: flex;
	    padding: 60px 20px 200px;
		margin-top: 80px;
	}
	.appeal-in.wrap .appeal-title {
      margin-left: 90px; /* 左マージン */
	  margin-top: 50px;
    }
　　.appeal-title{
　　　font-size:2.3rem;
	   }
	.header-container-in.hlt-top-menu .header {
    	padding: 0 20px;
	}
}