@charset "UTF-8";

/*!
Theme Name: Cocoon Child2
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

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


/******************************
** 全体共通
******************************/

/* .wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  flex-wrap: nowrap;
}

.main {
  width: clamp(708px, calc((100vw - 80px) * 0.75), 900px);
  padding: 20px 10px;
  box-sizing: border-box;
}

.sidebar {
  width: clamp(236px, calc((100vw - 80px) * 0.25), 300px);
  padding: 20px 10px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .main {
    padding: 0 0 0 10px;
  }
  .sidebar {
    padding: 0 10px 0 0;
  }
}

@media screen and (max-width: 1023px) {
  .wrap {
    flex-direction: column;
    gap: 0;
  }
  main.main,
  div.sidebar {
    width: 100%;
	margin: 10px;
	padding: 0 10px;
  }
}
 */


/******************************
** サイドバーCTAバナー
******************************/

.sidebar-cta-banner{
	margin-bottom:20px;
}

.cta-img{
	transition: opacity 0.3s ease;
}

.cta-img:hover {
	opacity: 0.7;
}
@media (min-width: 1024px) {
	.cta-img{
		width:100%;
	}
}
div.sidebar-cta{
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (max-width: 1023px) {
	div.sidebar-cta{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
}


/******************************
** カード型ランキング
******************************/


/* ランキングラッパー */
.cards-ranking-wrapper {
    margin-bottom: 1.4em;
}

/* ランキングタイトル */
.cards-ranking-wrapper .cards-ranking-title {
	margin-top: 1.4em;
    margin-bottom: 1.4em;
	border-left: 7px solid #888;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	background-color: #FFF;
}


/* ランキング一覧 */
.cards-ranking .ranking-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
	padding-top: 12px;
}

/* カード */
.cards-ranking .ranking-item {
	position: relative;
    display: flex;
    flex-direction: column;
}

.cards-ranking .ranking-item:hover .ranking-item-image-tag img{
	transform: scale(1.1);
}

.cards-ranking .ranking-item.border-element {
    width: 100%;
    box-sizing: border-box;
}

/* タイトル */
.cards-ranking .ranking-item-name {
    display: flex;
    align-items: flex-start;
	padding: 0;
	margin-top: 16px;
}

/* 商品名は3行まで表示（長い場合は省略） */
.cards-ranking .ranking-item-name-text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    min-height: 3.6em;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 王冠 */
.cards-ranking .ranking-item-name-crown {
	position: absolute;
	top: -12px;
	left: -8px;
	transform: scale(0.7);
    margin: 0;
	z-index: 2;
}

/* 商品画像 */
.cards-ranking .ranking-item-image-tag {
    margin: 0;
    max-width: none;
	height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}

.cards-ranking .ranking-item-image-tag img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
	transition: transform 0.3s ease;
}

/* 商品情報 */
.cards-ranking .ranking-item-img-desc {
	margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 価格 */
.cards-ranking .ranking-item-price {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    text-align: right;
}

/* .cards-ranking .ranking-item-price span {
    display: block;
} */

.cards-ranking .ranking-item-price span:first-child {
    font-weight: bold;
	font-size: 20px;
	color: rgb(201, 18, 18);
}

/* ボタン */
/* ボタンとその親のposition指定を強制的に解除 → 基準を.ranking-itemまで届かせる */
.cards-ranking .ranking-item-link-buttons,
.cards-ranking .ranking-item-detail {
    position: static !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

.cards-ranking .ranking-item-link-buttons a {
    position: static !important;
    display: block;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    border: none !important;
    font-size: 0 !important;
}

.cards-ranking .ranking-item-link-buttons a::after {
    content: "";
    visibility: visible;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0px;
}

/* 商品リンク */
a.item-link {
  color: inherit;          /* 親要素の文字色を引き継ぐ */
  text-decoration: none;   /* 下線を消す */
}


/* スマホ・タブレットなど、画面が狭い時だけスライダー化 */
@media (max-width: 768px) {
  .cards-ranking .ranking-items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .cards-ranking .ranking-item.border-element {
    width: calc((100% - 10px * 1.3) / 2.3);
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}


/******************************
** cta_block のスタイル 
****************************/

.cta-a, .cta-b {
	margin:30px 0px;
	display:flex;
	flex-direction:column;
	gap:25px;
}

.cta-a-title,.cta-b-title {
	font-size:20px;
	font-weight:bold;
/* 	border-top: 2px solid #ddd; */
	border-bottom: 3px solid #CCCCCC;
	background-color:#ffffff;
}

.cta-a h2, .cta-b h2{
	background-color:#ffffff;
	padding:15px;
}


.cta-a-image {
	text-align:center;
	width:100%;
}
.cta-a-image a{
	width:100%;
}

.cta-b-image{
	text-align:center;
	width:100%;
}

.cta-b-image a{
	width:90%;
}


.cta-b-features {
	font-weight:bold;
	margin-left:20px;
}

.cta-b-features .cta-b-features-title{
	margin:0;
}

.cta-b-features .cta-b-features-list{
	margin:0;
	list-style-type:disc;
	list-style-position:inside;
}

.cta-a-button {
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	line-height:normal;
}

.cta-b-button {
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	line-height:normal;
}
.cta-a-button-link:hover ,.cta-b-button-link:hover {
	opacity:0.7;
}

.cta-a .cta-a-button-link{
	line-height:1;
	color:#ffffff;
	border-radius:4px;
	font-weight:bold;
	font-size:16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 25px 45px;
	background-color:#1e50a2;
	transition:opacity 0.3s ease 0s;
}

.cta-b .cta-b-button-link{
	line-height:1;
	color:#ffffff;
	border-radius:4px;
	font-weight:bold;
	font-size:16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 25px 45px;
	background-color:#e60033;
	transition:opacity 0.3s ease 0s;
}

.cta-a .cta-b-button-link{
	line-height:1;
	color:#ffffff;
	border-radius:4px;
	font-weight:bold;
	font-size:16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 25px 45px;
	background-color:#e60033;
	transition:opacity 0.3s ease 0s;
}


/******************************
** 目次下のボタンのスタイル
****************************/


.toc-bottom-button {
 text-align: center;
 margin-top: 30px;
 margin-bottom:45px;
 font-size: clamp(12px, 2vw, 16px);
 font-weight:bold;
}

.toc-bottom-button a.toc-bottom {
 display: inline-block;
 margin:0px auto;
 padding: 16px 45px;
 background-color: #e60033;
 color: #fff;
 border-radius: 4px;
 text-decoration: none;
 font-size: clamp(14px, 2.5vw, 16px);
  font-weight:bold;
}

a.toc-bottom:hover{
  opacity:0.7;
}




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

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

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

.header, .header .site-name-text {
    color: inherit;
}
#is-headerFixed{
	background-color:#fff;
}

.appeal {
    
    background-size: cover;
}

.widget-sidebar-title.widget-title{
	font-size:16px;
}
.nwa .ranking-item-description p{
	font-size:75%;
	line-height: 1.4; font-weight: normal;
}

.entry-content a{
	color: #00308f;
	text-decoration:underline;
}
.entry-card-snippet.card-snippet.e-card-snippet{
	font-weight: normal;
}
.cat-label{
	display:none;
}
.cat-link.cat-link-1{
	display:none;
}

/* 監修者追加で .cat-linkの背景が黒くなる現象が発生 */

.entry-categories a.cat-link{
	color: #fff;
    text-decoration: none;
}

/* 監修者と記事作成者のリンクを変更 */

.author-name a{
	text-decoration:none;
	color:#000000;
	transition: opacity 0.2s ease;
}

.author-name a:hover{
	opacity:0.6;
}


/* 監修者パネルのカスタム */
.author-box p{
	margin-top:0px;
	margin-bottom:3px;
}


.supervisor-profile{
	margin:0px;
	font-size:clamp(0.9rem,1.5vw,1.0rem);
	font-weight:600;
}

.author-description p{
	font-size:clamp(0.85rem,1.5vw,0.95rem);
}

.supervisor-label{
 	color:#123d83;
/*	background-color:#123d83; */
	font-size:clamp(1.1rem,1.5vw,1.2rem);
}

.author-name a{
	color:#123d83;
	font-size:clamp(1.1rem,1.5vw,1.2rem);
}

/* 監修者のホームロゴマークのスタイル */
.website-button.website-follow-button-sq{
	text-decoration: none;
}