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

/************************************
** トップページ（案内所型フロントページ）専用スタイル
** (2026-07-28 スキン利用に合わせて全体デザインは撤去。
**  全体デザイン版はサーバーの style.css.design-20260727 と
**  gitリポジトリの cocoon-css/ に保存)
** 全体の配色・見出しはCocoonスキンに任せる
************************************/
:root {
  --cs-accent: #3e7050;
  --cs-accent-dark: #2d5540;
  --cs-muted: #8a8474;
  --cs-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.home.page .entry-title {
  display: none;
}

.cs-hero {
  text-align: center;
  padding: 2.5em 1em 1.5em;
}
.cs-hero-tag {
  color: var(--cs-muted);
  letter-spacing: .18em;
  font-size: .9em;
  margin-bottom: .5em;
}
.cs-hero-title {
  font-family: var(--cs-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
}
.cs-hero-lead {
  max-width: 34em;
  margin: 0 auto;
  line-height: 2;
}

.article h2.cs-sec-title, .cs-sec-title {
  text-align: center;
  font-size: 1.25rem;
  border: none;
  background: none;
  margin: 2.2em 0 1em;
  padding: 0;
}
.cs-sec-title::after {
  content: "";
  display: block;
  width: 2.5em;
  height: 2px;
  background: var(--cs-accent);
  margin: .5em auto 0;
}

.cs-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 1.2em;
}
a.cs-btn {
  display: inline-block;
  padding: .55em 1.5em;
  border: 1.5px solid var(--cs-accent);
  border-radius: 999px;
  color: var(--cs-accent-dark);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
}
a.cs-btn:hover {
  background: var(--cs-accent);
  color: #fff;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .cs-hero-title {
    font-size: 1.8rem;
  }
  .cs-hero {
    padding-top: 1.8em;
  }
}

/************************************
** ワスレナ英単語 誘導バナー（トップページ、2026-10-26）
************************************/
/* ワスレナ英単語 誘導バナー（トップページ：cs-hero 直下、「科目から探す」の上） */
.cs-app-banner {
  margin: 2em 0 2.5em;
  padding: 1.5em 1.7em 1.4em;
  background: #fbfaf6;
  border: 1px solid #e3dfd3;
  border-left: 5px solid var(--cs-accent);
  border-radius: 6px;
  color: #3a3832;
  text-align: left;
  line-height: 1.7;
}
.cs-app-banner p {
  margin: 0;
}
.cs-app-banner-label {
  font-size: 0.8em;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--cs-accent);
  margin-bottom: 0.5em !important;
}
.cs-app-banner-title {
  font-family: var(--cs-serif);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cs-accent-dark);
  margin-bottom: 0.6em !important;
}
.cs-app-banner-text {
  font-size: 0.95em;
  color: #444;
  margin-bottom: 1.1em !important;
}
.cs-app-banner-marker {
  background: linear-gradient(transparent 55%, #ffde59 55%);
  padding: 0 0.1em;
  font-weight: 700;
}
.cs-app-banner-cta {
  margin-bottom: 0.7em !important;
}
.cs-app-banner .cs-app-banner-btn {
  display: inline-block;
  padding: 0.7em 1.8em;
  background: var(--cs-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95em;
  text-decoration: none !important;
  border-radius: 999px;
  transition: background-color 0.2s;
}
.cs-app-banner .cs-app-banner-btn:hover,
.cs-app-banner .cs-app-banner-btn:focus {
  background: var(--cs-accent-dark);
  color: #fff !important;
  text-decoration: none !important;
}
.cs-app-banner-note {
  font-size: 0.8em;
  color: var(--cs-muted);
}

@media screen and (max-width: 480px) {
  .cs-app-banner {
    margin: 1.5em 0 2em;
    padding: 1.2em 1.1em 1.1em;
    border-radius: 4px;
  }
  .cs-app-banner-title {
    font-size: 1.1em;
  }
  .cs-app-banner-text {
    font-size: 0.9em;
  }
  .cs-app-banner-cta {
    text-align: center;
  }
  .cs-app-banner .cs-app-banner-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.85em 1em;
  }
}

/************************************
** 旧アプリSuper Flash Card紹介記事の「2026年追記」ボックス (2026-10-26)
** 旧記事内のSFC言及の直後に置き、後継「ワスレナ英単語」のLPへ誘導する
************************************/
.cs-sfc-note {
  margin: 1.6em 0;
  padding: 1em 1.2em;
  border: 1.5px solid var(--cs-accent);
  border-left-width: 6px;
  border-radius: 8px;
  background: #f6f9f6;
  line-height: 1.9;
}
.cs-sfc-note p {
  margin: 0;
}
.cs-sfc-note strong {
  color: var(--cs-accent-dark);
}
.cs-sfc-note a {
  color: var(--cs-accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #ffde59;
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
}
.cs-sfc-note a:hover {
  background: #ffde59;
  text-decoration: none;
}