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

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

.big-ad img{
width:100% !important;
max-width:500px !important;
height:auto !important;
display:block;
margin:auto;
}

/* =========================
自由に働く準備室
ナチュラルカスタム
========================= */

/* トップカテゴリ横並び */

.navi-in > ul{
display:flex;
justify-content:flex-start;
flex-wrap:nowrap;
}

.navi-in > ul li{
width:auto;
float:none;
}

.navi-in > ul li a{
padding:12px 0;
font-size:15px;
white-space:nowrap;
}


/* スマホ */

@media screen and (max-width:480px){

.navi-in > ul{
overflow-x:auto;
justify-content:flex-start;
padding:0 12px;
}

.navi-in > ul li a{
font-size:15px;
}

}

/* メニュー区切り線 */

.navi-in > ul li{
position:relative;
padding-right:18px;
margin-right:18px;
}


/* ｜ を追加 */

.navi-in > ul li:not(:last-child)::after{
content:"｜";
position:absolute;
right:-8px;
top:50%;
transform:translateY(-50%);
color:#bbb;
font-size:14px;
}


/* 最後だけ消す */

.navi-in > ul li:last-child{
padding-right:0;
margin-right:0;
}

/* 背景 */

body{
background:#f7f7f4;
}


/* メイン */

.main{
border-radius:20px;
}


/* 記事カード */

.a-wrap{
border-radius:18px;
overflow:hidden;
transition:0.3s;
}

.a-wrap:hover{
transform:translateY(-3px);
}


/* h2 */

.article h2{
border:none;
font-size:22px;
padding-bottom:14px;
position:relative;
margin-top:60px;
}

.article h2:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:70px;
height:3px;
background:#7FA7B7;
border-radius:999px;
}


/* h3 */

.article h3{
border-left:4px solid #7FA7B7;
padding-left:14px;
font-size:18px;
}


/* サイドバー */

.widget{
border-radius:18px;
}


/* ボタン */

.btn-wrap a{
background:#7FA7B7;
border:none;
border-radius:999px;
}


/* マーカー */

.marker-under-yellow{
background:linear-gradient(transparent 60%, #F5E7A8 60%);
}

/* =========================
background:#fff;
padding:28px 20px;
border-radius:20px;
text-align:center;
text-decoration:none;
color:#333;
font-weight:700;
box-shadow:0 4px 18px rgba(0,0,0,0.04);
transition:0.3s;
}

.home-category a:hover{
transform:translateY(-3px);
}


/* プロフィール */

.home-profile{
background:#fff;
padding:35px;
border-radius:24px;
box-shadow:0 4px 18px rgba(0,0,0,0.04);
margin-bottom:50px;
}

.home-profile p{
line-height:2;
color:#555;
}


/* スマホ */

@media screen and (max-width:834px){

.top-hero{
padding:45px 24px;
border-radius:20px;
}

.top-hero h1{
font-size:32px;
}

.hero-text{
font-size:15px;
}

.home-title{
font-size:24px;
}

}

/* プロフィールページ */

.profile-box{
background:#fff;
padding:40px;
border-radius:24px;
box-shadow:0 4px 18px rgba(0,0,0,0.04);
}

.profile-box img{
width:140px;
height:140px;
object-fit:cover;
border-radius:999px;
margin-bottom:20px;
}

@media screen and (max-width:834px){

.profile-box{
padding:24px;
border-radius:18px;
}

.profile-box img{
width:110px;
height:110px;
}

}

/* =========================
共通
========================= */

.sui-btn-wrap{
text-align:center;
margin:35px 0;
}

.sui-btn-wrap a{
text-decoration:none;
transition:0.3s;
display:inline-block;
font-weight:700;
}


/* =========================
① メインボタン
========================= */

.sui-btn-main{
background:#7FA7B7;
color:#fff !important;
padding:16px 38px;
border-radius:999px;
font-size:16px;
box-shadow:0 4px 14px rgba(127,167,183,0.25);
}

.sui-btn-main:hover{
transform:translateY(-2px);
opacity:0.9;
}


/* =========================
② サブボタン
========================= */

.sui-btn-sub{
background:#EEF5F7;
color:#5F7E89 !important;
padding:15px 34px;
border-radius:999px;
font-size:15px;
}

.sui-btn-sub:hover{
background:#E3EEF1;
}


/* =========================
③ 白抜きボタン
========================= */

.sui-btn-border{
border:2px solid #7FA7B7;
color:#7FA7B7 !important;
padding:14px 34px;
border-radius:999px;
font-size:15px;
background:#fff;
}

.sui-btn-border:hover{
background:#F6FBFD;
}


/* =========================
④ 小さめボタン
========================= */

.sui-btn-small{
background:#F3F3F3;
color:#666 !important;
padding:10px 22px;
border-radius:999px;
font-size:13px;
font-weight:600;
}

.sui-btn-small:hover{
background:#EBEBEB;
}


/* =========================
⑤ 紹介コード強調
========================= */

.sui-btn-recommend{
background:linear-gradient(135deg,#7FA7B7,#9BBCC9);
color:#fff !important;
padding:18px 42px;
border-radius:999px;
font-size:17px;
box-shadow:0 6px 18px rgba(127,167,183,0.28);
position:relative;
display:inline-block;
}


/* ラベル */

.sui-btn-label{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:#fff;
color:#7FA7B7;
font-size:11px;
padding:4px 10px;
border-radius:999px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
white-space:nowrap;
font-weight:700;
}

/* =========================
スマホ
========================= */

@media screen and (max-width:480px){

.sui-btn-main,
.sui-btn-sub,
.sui-btn-border,
.sui-btn-recommend{
width:90%;
max-width:320px;
font-size:15px;
}

.sui-btn-main,
.sui-btn-sub,
.sui-btn-border{
padding:15px 20px;
}

.sui-btn-recommend{
padding:18px 20px;
}

}


/* ----------------------------------------------------------
   ブログカードカスタムスタイル
---------------------------------------------------------- */

/* ---------------------------
   共通スタイル
--------------------------- */
[class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap {
  margin-bottom: 0;
  width: 100%;
  position: relative;
  border: 1px solid var(--cocoon-basic-border-color);
  border-radius: 0;
  padding: 1em;
  transition: .3s;
}

/*480px以下*/
@media screen and (max-width: 480px){
  [class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap {
    padding: .8em;
  }
}

/* ホバー時 */
[class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap:hover {
  background-color: transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* ラベル */
[class*="is-style-cstmcard-"] .blogcard-label {
  position: absolute;
  top: -11px;
  font-size: 0.7em;
  color: #666;
  background-color: #fff;
}

/* タイトル・抜粋 共通 */
[class*="is-style-cstmcard-"] .blogcard-title,
[class*="is-style-cstmcard-"] .blogcard-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 0.2em;
}

/* タイトル例外 */
.is-style-cstmcard-textlink .blogcard-title,
.is-style-cstmcard-footer-excerpt .blogcard-title,
.is-style-cstmcard-img-footer-excerpt .blogcard-title,
.is-style-cstmcard-vertical-footer-excerpt .blogcard-title {
  margin-bottom: 0;
  -webkit-line-clamp: 3;
}

/* タイトルサイズ */
[class*="is-style-cstmcard-"] .blogcard-title {
  font-size: 1rem;
}

@media screen and (max-width: 834px) {
  [class*="is-style-cstmcard-"] .blogcard-title {
    font-size: 1em;
  }
}

/* フッター・抜粋非表示 */
[class*="is-style-cstmcard"][class*="-footer"] .blogcard-footer,
.is-style-cstmcard-textlink .blogcard-footer,
[class*="is-style-cstmcard"][class*="-excerpt"] .blogcard-snippet,
.is-style-cstmcard-textlink .blogcard-snippet {
  display: none;
}

/* 画像なし */
[class*="cstmcard-img"] .blogcard-thumbnail,
.is-style-cstmcard-textlink .blogcard-thumbnail {
  display: none;
}

[class*="cstmcard-img"] .blogcard-content,
.is-style-cstmcard-textlink .blogcard-content {
  margin-left: 0;
  min-height: unset;
}

/* テキストリンク */
.is-style-cstmcard-textlink .blogcard-wrap.a-wrap {
  border: 0;
  padding: 0;
  box-shadow: none !important;
}

.is-style-cstmcard-textlink .blogcard-title:hover {
  text-decoration: underline;
}

.is-style-cstmcard-textlink .blogcard-content {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.is-style-cstmcard-textlink .blogcard-content::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c1";
  font-weight: bold;
  margin-right: 5px;
  color: #677593;
  display: inline-block;
  transform: translateY(1px);
}

/* 縦型 */
[class*="is-style-cstmcard-vertical"] .blogcard-wrap.a-wrap {
  max-width: 240px;
}

[class*="is-style-cstmcard-vertical"] .blogcard-wrap {
  display: flex;
  flex-direction: column;
}

[class*="is-style-cstmcard-vertical"] .blogcard-thumbnail {
  width: 100%;
  margin-bottom: 5px;
}

[class*="is-style-cstmcard-vertical"] .blogcard-content {
  margin-left: 0;
  line-height: 1.6;
}

.is-style-cstmcard-vertical-footer-excerpt .blogcard-content {
  min-height: unset;
}

/* Read Moreボタン */
[class*="is-style-cstmcard"][class*="-more"] .blogcard-wrap.a-wrap::after {
  content: 'Read More';
  display: inline-block;
  background-color: #7c776d;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  z-index: 1;
  transition: opacity 0.2s ease;
}

[class*="is-style-cstmcard"][class*="-more"] .blogcard-wrap.a-wrap:hover::after {
  opacity: 0.8;
}

/* 横型 */
[class*="is-style-cstmcard"][class*="-more-1"] .blogcard-wrap.a-wrap::after {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.3em 2em;
}

/* 縦型 */
[class*="is-style-cstmcard"][class*="-more-2"] .blogcard-wrap.a-wrap::after {
  text-align: center;
  padding: 0.3em 0;
}

[class*="is-style-cstmcard"][class*="-more-2"] .blogcard-content {
  min-height: 60px;
}

/* ブロックボックス内 */
.block-box:not(.timeline-box,.wp-block-cocoon-blocks-faq) [class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap:hover {
  box-shadow: none;
}

.block-box:not(.timeline-box,.wp-block-cocoon-blocks-faq) [class*="is-style-cstmcard-"] .blogcard-wrap.a-wrap {
  border-width: 0;
  padding: 0;
}

.block-box:not(.timeline-box,.wp-block-cocoon-blocks-faq) [class*="is-style-cstmcard-"] .blogcard-label {
  display: none;
}

.block-box:not(.timeline-box,.wp-block-cocoon-blocks-faq) [class*="is-style-cstmcard-"] .blogcard-thumbnail {
  margin-top: 0;
}

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

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

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