@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
*/
/* * * * * * * * Home * * * * * * * */ 
.home .article-header,
.home .article-footer {
  display: none;
}
.wp-block-search {
	text-align:center;	margin:0 auto;
}
.toppage h2.title {
    margin:2rem 0; padding:0; border:none;
	text-align:center;	font-size:2.5rem;	letter-spacing:1px; line-height:1.8;
	background: #ffffff; 	color: #666666;
}
.toppage h2.title span {
	display:block;
}

.toppage .widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;
}
.toppage .widget-entry-cards.large-thumb{
   display: flex; 
   flex-wrap: wrap;
}


.newpost_top .new-entry-cards.large-thumb a{
  width:calc(100% / 1);
}

.newpost_bottom .new-entry-cards.large-thumb a,
.cate .new-entry-cards.large-thumb a,
.toppage .popular-entry-cards.large-thumb a{
  width:calc(100% / 3);
}

@media screen and (max-width: 834px){
       .toppage .new-entry-cards.large-thumb a{
		width:100%;
	}
       .newpost_bottom .new-entry-cards.large-thumb a,
       .cate .new-entry-cards.large-thumb a,
       .toppage .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/
	}	
}

/* * * * * * * * About * * * * * * * */ 

/* 背景に斜めのグラデーション */
.pat3-back-gradation {
  background-image: linear-gradient(-45deg, var(--LtBlue_T90) 0%, var(--LtBlue_T90) 50%, var(--white) 50%, var(--white) 100%);
}

/* 背景に斜めのグラデーションの場合はカバーブロック内の余白を多めに */
.cstm-pat-3.pat3-back-gradation>.wp-block-cover__inner-container {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

/* More btn */
.cstm-pat-3 p.cstm-more-btn {
  padding-right: 1em;
}

/* テキストエリアずらし横並びタイプ */
.cstm-pat-3.shift-type>.wp-block-cover__inner-container {
  padding-bottom: 12rem;
}

.cstm-pat-3.shift-type .float-text-area {
  margin-left: -2%;
  margin-bottom: -15% !important;
  background-color: var(--LtGray_T70_A50);
  padding: 4rem;
}
@media screen and (max-width: 834px) {
  .cstm-pat-3>.wp-block-cover__inner-container,
  .cstm-pat-3.pat3-back-gradation>.wp-block-cover__inner-container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  /* テキストエリアずらし横並びタイプ */
  .cstm-pat-3.shift-type .float-text-area {
    padding: 4rem 2rem;
    margin-top: -15%;
  }
}
/* * * * * * * * Popular * * * * * * * */ 

.cstm-pat-5 .popular-list-box.cstm-ect-vertical-card .popular-entry-cards .a-wrap {
  line-height: 1.6;
}

.cstm-pat-5 .popular-list-box.cstm-ect-vertical-card .popular-entry-cards {
  display: grid;
  place-content: center;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 4px;
  column-gap: 4px;
  row-gap: 4px;
}

/* 人気記事ウィジェット　指定のクラス名のときのみ　投稿日・更新日を表示 */
.cstm-pat-5 .popular-entry-card.widget-entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cstm-pat-5 .popular-entry-card-thumb.widget-entry-card-thumb {
  margin: 0;
  flex-shrink: 0;
}

.cstm-pat-5 .popular-entry-card.widget-entry-card .popular-entry-card-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: 100%;
  padding: 0.6em 0;
}

.cstm-pat-5 .popular-entry-card-title.widget-entry-card-title.card-title {
  -webkit-line-clamp: unset;
  height: auto;
  display: block;
  overflow: visible;
}

.cstm-pat-5 .popular-entry-card-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  font-size: .7em;
  color: var(--skin-grayish-site-sub-color);
  /* margin-top: auto; */
}

.cstm-pat-5 .popular-entry-card-post-date.widget-entry-card-post-date.post-date,
.cstm-pat-5 .popular-entry-card-update-date.widget-entry-card-update-date.post-update {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 0.9em;
  position: relative;
}


.cstm-pat-5 .popular-entry-card-post-date.widget-entry-card-post-date.post-date::before,
.cstm-pat-5 .popular-entry-card-update-date.widget-entry-card-update-date.post-update::before {
  /* display: inline-block; */
  display: none;
  content: "\f017";
  background-repeat: no-repeat;
  background-size: cover;
  width: fit-content;
  height: auto;
  margin-right: 3px;
}

.cstm-pat-5 .popular-entry-card-update-date.widget-entry-card-update-date.post-update::before {
  font-weight: 900;
  content: "\f1da";
}


/* .shift-mode popular-entry-cardsの2つ目の子要素にmargin-top付けたい 以降繰り返し*/
.cstm-pat-5 .popular-list-box.cstm-ect-vertical-card.shift-mode .popular-entry-cards .a-wrap:nth-child(3n+2) {
  margin-top: 2rem;
}

/* .shift-mode popular-entry-cardsの3つ目の子要素にmargin-top付けたい 以降繰り返し*/
.cstm-pat-5 .popular-list-box.cstm-ect-vertical-card.shift-mode .popular-entry-cards .a-wrap:nth-child(3n) {
  margin-top: 4rem;
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .cstm-pat-5 .popular-list-box.cstm-ect-vertical-card .popular-entry-cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .cstm-pat-5 .popular-list-box.cstm-ect-vertical-card .popular-entry-cards .a-wrap {
    max-width: unset;
  }

  /* .shift-mode クリア*/
  .cstm-pat-5 .popular-list-box.cstm-ect-vertical-card.shift-mode .popular-entry-cards .a-wrap:nth-child(3n+2) {
    margin-top: 0rem;
  }

  /* .shift-mode クリア*/
  .cstm-pat-5 .popular-list-box.cstm-ect-vertical-card.shift-mode .popular-entry-cards .a-wrap:nth-child(3n) {
    margin-top: 0rem;
  }	
}		
	
/* * * * * * * * Navi Cards * * * * * * * */ 
.widget-entry-cards.large-thumb{
	display: flex;
	flex-wrap: wrap;
}
.navi-entry-cards.large-thumb a{
	width:calc(100% / 2 );
}

/* * * * * * * * Box Menu * * * * * * * */ 
.box-menu-icon {
   display: none;
}
.box-menu {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #666666;
}

/* * * * * * * * POP header * * * * * * * */ 

.popheader-slash {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
  margin-bottom: 0.2em;
}
.popheader-slash::before,
.popheader-slash::after {
    width: 3px;
    height: 40px;
    background-color: #778893;
    content: '';
}
.popheader-slash::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}
.popheader-slash::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
/**************************
 タブ切り替え
***************************/

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


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

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

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

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color: var(--LtBlue_T0);/*タブの背景色*/
  border:1px solid var(--LtBlue_T0);/*タブの枠線　太さ　種類　色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
       border-top:10px solid var(--LtBlue_T0);/*タブの吹き出し部分*/
	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;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}



/* * * * * * * * TOP PR  * * * * * * * */ 
.pr-label-t {
  top: 3px;
  left: 3px;
  border: 1px solid rgba(51, 51, 51, 0.7);
  font-size: 12px;
  color: var(--cocoon-text-color);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 12px;
  border-radius: var(--cocoon-badge-border-radius);
}
@media screen and (max-width: 834px) {
  .pr-label-t {
    left: 6px;
    padding: 1px 8px;
  }
}
/* * * * * * * * Map  * * * * * * * */ 
.map {
  position: relative;  overflow: hidden;
  width: 80%;   height: 0;
  padding-bottom: 75%; margin: auto;
}
.map iframe {
  position: absolute;
  width: 100% !important;  height: 90% !important;
  top: 0;  left: 0;
}
/* * * * * * * * YouTube  * * * * * * * */ 
.video-container {
  max-width: none;
}
.is-type-video iframe {
	border:  2px solid #AAC2D2; border-radius: 20px;
	 width:100%; margin : 0 auto;
}
.youtube-short * {
margin : 0; padding : 0;
}
.youtube-short iframe {
  position: relative;
  aspect-ratio:9 /16; 
}
.youtube-short .video {
  max-width: 400px;  height: 100%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
}

/* カスタムテキスト */
.cocoon-custom-text-1 {
color : #999999;
}

/* アイコンボックス 案内ボックス */
.is-style-information-box, .information-box, .information,
.is-style-question-box, .question-box, .question,
.is-style-alert-box, .alert-box, .alert,
.is-style-memo-box, .memo-box,
.is-style-comment-box, .comment-box,
.is-style-ok-box, .ok-box,
.is-style-ng-box, .ng-box,
.is-style-good-box, .good-box,
.is-style-bad-box, .bad-box,
.is-style-profile-box, .profile-box,
.is-style-primary-box, .primary-box, .sp-primary, .primary,
.is-style-secondary-box, .secondary-box,
.is-style-info-box, .info-box, .sp-info, .info,
.is-style-success-box, .success-box, .sp-success, .success,
.is-style-warning-box, .warning-box, .sp-warning, .warning,
.is-style-danger-box, .danger-box, .sp-danger, .danger,
.is-style-light-box, .light-box,
.is-style-dark-box, .dark-box {
	position: relative;
	background: rgba(var(--white-color), .3);
	border-width: 1px;
	border-style: solid;
}

.is-style-information-box::after, .information-box::after, .information::after,
.is-style-question-box::after, .question-box::after, .question::after,
.is-style-alert-box::after, .alert-box::after, .alert::after,
.is-style-memo-box::after, .memo-box::after,
.is-style-comment-box::after, .comment-box::after,
.is-style-ok-box::after, .ok-box::after,
.is-style-ng-box::after, .ng-box::after,
.is-style-good-box::after, .good-box::after,
.is-style-bad-box::after, .bad-box::after,
.is-style-profile-box::after, .profile-box::after,
.is-style-primary-box::after, .primary-box::after, .sp-primary::after, .primary::after,
.is-style-secondary-box::after, .secondary-box::after,
.is-style-info-box::after, .info-box::after, .sp-info::after, .info::after,
.is-style-success-box::after, .success-box::after, .sp-success::after, .success::after,
.is-style-warning-box::after, .warning-box::after, .sp-warning::after, .warning::after,
.is-style-danger-box::after, .danger-box::after, .sp-danger::after, .danger::after,
.is-style-light-box::after, .light-box::after,
.is-style-dark-box::after, .dark-box::after {
	position: absolute;
	content: "";
	top: 5px;
	left: 5px;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	z-index: -1;
}

.is-style-information-box::after, .information-box::after, .information::after {
	background-color: #f3fafe;
}

.is-style-question-box::after, .question-box::after, .question::after {
	background-color: #fff7cc;
}

.is-style-alert-box::after, .alert-box::after, .alert::after {
	background-color: #fdf2f2;
}

.is-style-memo-box::after, .memo-box::after {
	background-color: #ebf8f4;
}

.is-style-comment-box::after, .comment-box::after {
	background-color: rgba(var(--gray-light-color), 1);
}

.is-style-ok-box::after, .ok-box::after {
	background-color: #f2fafb;
}

.is-style-ng-box::after, .ng-box::after {
	background-color: #ffe7e7;
}

.is-style-good-box::after, .good-box::after {
	background-color: #f7fcf7;
}

.is-style-bad-box::after, .bad-box::after {
	background-color: #fff1f4;
}

.is-style-profile-box::after, .profile-box::after {
	background-color: rgba(var(--gray-light-color), 1);
}

.is-style-profile-box::after, .profile-box::after {
	background-color: rgba(var(--gray-light-color), 1);
}

.is-style-primary-box::after, .primary-box::after, .sp-primary::after, .primary::after {
	background-color: #cce5ff;
}

.is-style-secondary-box::after, .secondary-box::after {
	background-color: #e2e3e5;
}

.is-style-info-box::after, .info-box::after, .sp-info::after, .info::after {
	background-color: #d1ecf1;
}

.is-style-success-box::after, .success-box::after, .sp-success::after, .success::after {
	background-color: #d4edda;
}

.is-style-warning-box::after, .warning-box::after, .sp-warning::after, .warning::after {
	background-color: #fff3cd;
}

.is-style-danger-box::after, .danger-box::after, .sp-danger::after, .danger::after {
	background-color: #f8d7da;
}

.is-style-light-box, .light-box {
	border-color: rgba(var(--gray-light-color), 1);
}

.is-style-light-box::after, .light-box::after {
	background-color: rgba(var(--gray-light-color), 1);
}

.is-style-dark-box::after, .dark-box::after {
	background-color: #d6d8d9;
}

/* * * * * * * * kattene  * * * * * * * */ 

.kattene__title {
  margin-bottom: 10px;
}

.kattene__title a {
  color: #3f3f3f;
  font-size: 18px;
  text-decoration: none;
  font-weight: bold;
  display: block;
}
.kattene__btns {
	  font-size: 14px;  font-weight: bold; letter-spacing: 0px;
}

.kattene .kattene__btn:hover {
  opacity: 0.7;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5 ease;
}
.kattene .kattene__btn.__orange,.kattene .kattene__btn.__orange:hover  {  background-color: #f8b542;}
.kattene .kattene__btn.__red,.kattene .kattene__btn.__red:hover {  background-color: #f47c76;}
.kattene .kattene__btn.__pink,.kattene .kattene__btn.__pink:hover {  background-color: #f86f9c;}
.kattene .kattene__btn.__green,.kattene .kattene__btn.__green:hover {  background-color: #34c9c1;}
.kattene .kattene__btn.__blue,.kattene .kattene__btn.__blue:hover {  background-color: #3fb3dd;}
.kattene .kattene__btn.__purple,.kattene .kattene__btn.__purple:hover { background-color: #795284;}
.kattene .kattene__btn.__black,.kattene .kattene__btn.__black:hover { background-color: #3f3f3f;}
.kattene .kattene__btn.__gray,.kattene .kattene__btn.__gray:hover { background-color: #999999;}

.kattene .kattene__btn.__purple,.kattene .kattene__btn.__gray,.kattene .kattene__btn.__black { margin-bottom: 5px; border-radius: 3px; text-align: center; }
.kattene .kattene__btn.__purple {
  -webkit-box-shadow: 0 5px 0 #48314f;
  -moz-box-shadow: 0 5px 0 #48314f;
  box-shadow: 0 5px 0 #48314f;
  -o-box-shadow: 0 5px 0 #48314f;
  -ms-box-shadow: 0 5px 0 #48314f;
}
.kattene .kattene__btn.__gray {
  -webkit-box-shadow: 0 5px 0 #666666;
  -moz-box-shadow: 0 5px 0 #666666;
  box-shadow: 0 5px 0 #666666;
  -o-box-shadow: 0 5px 0 #666666;
  -ms-box-shadow: 0 5px 0 #666666;
}
.kattene .kattene__btn.__black {
  -webkit-box-shadow: 0 5px 0 #000000;
  -moz-box-shadow: 0 5px 0 #000000;
  box-shadow: 0 5px 0 #000000;
  -o-box-shadow: 0 5px 0 #000000;
  -ms-box-shadow: 0 5px 0 #000000;
}
.kattene__btn.__purple i:before, .kattene__btn.__gray i:befor, .kattene__btn.__black i:befor {
      vertical-align: middle;
      font-size: 1.2em;
      margin-right: 0.2em; 
}
/* * * * * * * * Appreach * * * * * * * */ 

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

/* * * * * * * * CTA  * * * * * * * */ 
.footer_button a {border-radius: 5px;}
.cta_red .footer_button a {
  background-color: #f47c76;
}
.cta_blue .footer_button a {
  background-color: #3fb3dd;;
}
.cta_green .footer_button a {
  background-color: #34c9c1;
}
.cta_key .footer_button a {
  background-color: #f8b542;
}
.body:has(.fixed_contents):not(:has(#fixed_close:checked)) {
  margin-bottom: 85px;
}
.cta_v .footer_fixed {
  flex-direction: column;
  gap: 0;
}
input#fixed_close {
  display: none;
}
.footer_fixed {
  background:rgba(0, 0, 0, 0.7);
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 85px;
  box-shadow: 0 -2px 5px rgb(0 0 0 / 15%);
  gap: 1em;
}
.footer_micro {
  color: #fff;
}
#fixed_close:checked ~ .fixed_contents {
  transform: translate(0, 80vh);
}
.fixed_contents {
  transition: all 1s ease;
  opacity: 1;
  position: fixed;
  bottom: 0;
  width: 100%;
  transform: translate(0, 0);
  left: 0;
  z-index: 1;
}
span.close .fa-xmark:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  font-weight: bold;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
span.close .fa-xmark:before{
  content: none;
}
span.close .fa-xmark {
  background: white;
  width: 26px;
  height: 26px;
  z-index: 7;
  position: absolute;
  top: -13px;
  left: 1.5em;
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 0 10px 0px #090909;
  color: black;
  cursor: pointer;
}
#fixed_close label.button {
  position: fixed;
  bottom: 3em;
  left: 2em;
}
span.footer_micro {
  font-size: 12px;
}
span.footer_button {
  max-width: 500px;
  text-align: center;
  width: 100%;
  position: relative;
  transition: 0.3s all;
}
.cta_s span.footer_button {
  width: 400px;
  max-width: 60%;
}
span.footer_button a::after {
  content: "\f105";
  position: absolute;
  right: .4em;
  font-size: 20px;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  top: 50%;
  transform: translateY(-50%);
}
span.footer_button:hover {
  opacity: 0.7;
}
.cta_s span.footer_micro {
  max-width: 48%;
}
span.footer_button a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: white;
  display: block;
  padding: .7em 1em;
}
span.footer_button img[width="1"] {
  position: absolute;
  top: 0;
  right: 0;
}
.body:has(.fixed_contents):not(:has(#fixed_close:checked)) .go-to-top {
  bottom: 95px;
}
.body:has(.fixed_contents):not(:has(#fixed_close:checked)) .mobile-footer-menu-buttons {
  display: none;
}