@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** トップのメインビジュアル（アピールエリア）
************************************/
#appeal{background-size:cover;background-position:center center;}
#appeal #appeal-in{display:flex;align-items:center;}
#appeal .appeal-content{background:none;margin:0;padding:0;text-align:left;max-width:none;}
#appeal .appeal-title{max-width:8.6em;margin:0 0 26px;font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif;font-weight:600;font-size:48px;line-height:1.35;letter-spacing:.04em;color:#fff;text-shadow:0 2px 12px rgba(10,24,42,.35);}
#appeal .appeal-title::before{content:"MIDLIFE CAREER";display:block;margin-bottom:18px;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;font-size:14px;font-weight:600;line-height:1;letter-spacing:.32em;color:#e8913a;text-shadow:none;}
#appeal .appeal-message{color:#dfe6ee;font-size:18px;letter-spacing:.06em;}
#appeal .appeal-message::before{content:"";display:block;width:64px;height:3px;margin-bottom:22px;background:#e8913a;}
#appeal .appeal-message p{margin:0;}

@media screen and (max-width: 834px){
  #appeal{background-position:72% center;}
  #appeal #appeal-in{min-height:400px;align-items:flex-start;padding:40px 24px;}
  #appeal .appeal-content{width:100%;text-align:center;}
  #appeal .appeal-title{margin:0 auto 20px;font-size:32px;}
  #appeal .appeal-title::before{font-size:12px;margin-bottom:14px;}
  #appeal .appeal-message{font-size:14px;text-shadow:0 1px 8px rgba(10,24,42,.6);}
  #appeal .appeal-message::before{width:48px;margin:0 auto 16px;}
}

/************************************
** トップページ（固定ページ「TOP」）
************************************/
/* トップページのタイトルを非表示 */
.front-top-page #main .entry-title{
  display: none;
}

/* 2カラム（ピックアップ・コンテンツ） */
.column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.column {
  flex: 1;
  min-width: 300px;
}
@media (max-width: 768px) {
  .column-wrapper {
    flex-direction: column;
  }
}

/* トップページではアイキャッチ・シェアボタン・日付を非表示（アイキャッチはSNSシェア時の画像として残す） */
.front-top-page #main .eye-catch-wrap,
.front-top-page #main .sns-share,
.front-top-page #main .date-tags{
  display: none;
}

/* メインビジュアル見出しのトップページへのリンク */
#appeal .appeal-title a{
  color: #fff;
  text-decoration: none;
}
#appeal .appeal-title a:hover{
  opacity: .85;
}