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

/* ============================================
   ホーム（固定ページID 6）のスタイル
   2026-08-01 本文の<style>から移設。
   WAFが<style>タグを拒否しREST APIで本文を保存できないため。
   ============================================ */
.fnd-home{--sea:#2c6e88;--sea-soft:#e1eef2;--sakura:#c25f7c;--ink:#333;--muted:#6c7178;--line:#e4e4e0}
.fnd-hero{background:var(--sea-soft);border-radius:14px;padding:30px 22px 22px;text-align:center;margin-bottom:40px}
.fnd-hero .fnd-hero-title{margin:0 0 14px;font-size:clamp(1.32em,4.5vw,2.2em);line-height:1.35;font-weight:800;color:var(--ink)}
.fnd-hero .fnd-em{color:var(--sakura);font-weight:800}
.fnd-hero h2::before,.fnd-hero h2::after{content:none}
.fnd-hero p{margin:0;color:#222;font-size:1.1em;line-height:1.8}
.fnd-sec{ text-align:center;font-size:1.3em;margin:48px 0 8px;border:none;padding:0}
.fnd-sec::before,.fnd-sec::after{content:none}
.fnd-note{text-align:center;color:var(--muted);font-size:.88em;margin:0 0 22px}
.fnd-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:640px){.fnd-cards{grid-template-columns:1fr}}
.fnd-card{background:#fff;border:1px solid var(--line);border-top:3px solid #0077BE;border-radius:12px;padding:18px 18px 16px;text-align:center}
.fnd-card.is-sakura{border-top-color:var(--sakura)}
.fnd-card h3{margin:0 0 6px;font-size:1.08em;color:var(--sea);border:none;padding:0;background:none}
.fnd-card.is-sakura h3{color:var(--sakura)}
.fnd-card p{margin:0 0 14px;font-size:.88em;color:var(--muted);min-height:2.6em}
.fnd-card a.fnd-btn{display:block;background:#0077BE;color:#fff;border-radius:8px;padding:10px 0;font-size:.9em;text-decoration:none}
.fnd-card a.fnd-btn:hover{background:#005B8F;color:#fff}
/* SAKURA乗船記カードはボタンも桜色に */
.fnd-card.is-sakura a.fnd-btn{background:var(--sakura)}
.fnd-card.is-sakura a.fnd-btn:hover{background:#b0506d}
.fnd-prof{border:2px dashed var(--line);border-radius:12px;padding:22px 24px;background:#fff}
.fnd-prof ul{margin:0 0 12px;padding-left:1.2em}
.fnd-prof li{margin:4px 0}
.fnd-prof p{margin:0 0 1.2em;color:var(--ink)}
.fnd-prof p:last-child{margin-bottom:0}
/* ホームページのノイズ非表示 */
body.home .entry-title{display:none}
body.home .sns-share,body.home .sns-follow{display:none}
body.home .article-header .post-date,body.home .post-update,body.home .post-date{display:none}
body.home .entry-footer,body.home .article-footer{display:none}
body.home .breadcrumb{display:none}
body.home .toc,body.home .toc-container{display:none}
/* 見出し帯の打ち消し */
.entry-content .fnd-hero h2,.entry-content h2.fnd-sec{background:none!important;background-color:transparent!important;color:#333;padding:0;border:none;border-radius:0}
.entry-content .fnd-card h3{background:none!important;padding:0;border:none}
.entry-content h2.fnd-sec{text-align:center}


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

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

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

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


/* サイドバーの見出しバーを薄めの桜色に */
.sidebar h3 {
  background-color: #f5e3e8;
  color: #8a4258;
}


/* 記事内の見出し(H2)バーも桜色に */
.article h2 {
  background-color: #f5e3e8;
  color: #8a4258;
}


/* 老眼にやさしい記事本文(2026-07-23) */
.article {
  color: #222;
  line-height: 1.9;
}
.article p {
  margin-bottom: 1.8em;
}
.article a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article table {
  font-size: 1em;
}


/* カード類のカテゴリラベルを非表示(アイキャッチ上の帯が邪魔なため) */
.cat-label {
  display: none !important;
}


/* ボタン・カード類のリンクは下線なし(下線は本文中のテキストリンクだけ) */
.article .sns-share a,
.article .sns-follow a,
.article a.related-entry-card-wrap,
.article .pager-post-navi a,
.article .comment-btn a,
.article a.fnd-btn {
  text-decoration: none;
}


/* サイドバー新着記事をカード型に */
.sidebar .wp-block-latest-posts li {
  background: #fff;
  border: 1px solid #e4ddd2;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}
.sidebar .wp-block-latest-posts li a {
  text-decoration: none;
  font-size: .95em;
  line-height: 1.5;
  font-weight: 600;
}
.sidebar .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 8px;
}
.sidebar .wp-block-latest-posts__post-date {
  font-size: .8em;
  color: #777;
  margin-top: 4px;
}


/* サイト名ロゴを上品な明朝体に */
.header .site-name-text,
.footer .site-name-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  letter-spacing: .14em;
}
.header .site-name-text {
  font-size: 2.6em;
  color: #1c3d4a;
}
.header .site-name,
.header .header-in {
  text-align: center;
  width: 100%;
  justify-content: center;
}
.header .site-name {
  display: block;
  margin: 0 auto;
}


/* ロゴを本文カラムの中心に合わせる(PC表示・サイドバー幅の半分だけ左へ) */
@media (min-width: 1024px) {
  .header .site-name {
    position: relative;
    left: -198px;
  }
}



/* 更新日もサイト名と同じだけ左へずらす(PC表示) */
@media (min-width: 1024px) {
  .logo-header::after {
    position: relative;
    left: -198px;
  }
  /* PCだけ文字を1.2倍にする(スマホは変えない) */
  #header .site-name-text { font-size: 44px; }
  #header .logo-header::after { font-size: 25px; }
}

/* タブレット横向き(835〜1023px)のサイト名 */
@media (min-width: 835px) and (max-width: 1023px) {
  #header .site-name-text { font-size: 37px; }
}

/* ===== スマホ表示の調整（2026-07-31） ===== */
@media screen and (max-width: 834px) {
  /* サイト名を大きくする */
  #header .site-name-text {
    font-size: 41px;
    letter-spacing: 0.06em;
  }
  /* サイト名の上下の余白を詰める */
  .logo-text {
    padding: 12px 0 12px;
  }
  /* ヘッダーと本文のあいだを詰める */
  .content {
    margin-top: 6px;
  }
  /* CocoonがIDセレクタ(#main)で指定しているため、こちらもIDで上書きする */
  #main {
    padding-top: 6px;
    margin-top: 0;
  }
  /* 本文エリアと最初の箱の余白も詰める */
  .entry-content {
    margin-top: 4px;
  }
  .fnd-hero {
    padding-top: 12px;
  }
  /* ヒーロー内の余白を詰める（スマホは縦が長くなりやすいため） */
  .fnd-hero {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }
  .fnd-hero .fnd-hero-title {
    margin-bottom: 8px;
  }
  .fnd-hero p:not(.fnd-hero-title) {
    margin-bottom: 0;
  }
  .fnd-hero img {
    margin-top: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  #header .site-name-text {
    font-size: 37px;
  }
}


/* トップのキャッチコピーをサイト名と同じ明朝体に(色とサイズは変えない) */
.fnd-hero,
.fnd-hero .fnd-hero-title,
.fnd-hero p,
.fnd-hero span,
.fnd-hero strong {
  font-family: 'Shippori Mincho', serif;
}

/* スマホ・タブレットでもサイドバーを表示する（本文の下に並ぶ）2026-08-01 */
@media screen and (max-width: 1023px) {
  .no-mobile-sidebar .sidebar {
    display: block;
    width: 100%;
    margin-top: 2em;
    padding: 0;
    float: none;
  }
}


/* スマホでサイドバー末尾へ移動した「サイト運営者について」を本文と同じ見た目に保つ 2026-08-01 */
#sidebar .fnd-prof-moved{--sea:#2c6e88;--sea-soft:#e1eef2;--sakura:#c25f7c;--ink:#333;--muted:#6c7178;--line:#e4e4e0}
#sidebar .fnd-prof-moved h2,
#sidebar .fnd-prof-moved h2.fnd-sec{
  background:none !important;
  background-color:transparent !important;
  color:#333 !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  text-align:center;
  font-size:1.3em;
  margin:48px 0 8px;
}
#sidebar .fnd-prof-moved h2::before,
#sidebar .fnd-prof-moved h2::after{content:none}


/* ============================================
   記事本文（.skc）の共通スタイル
   2026-08-01 各記事の<style>から統合移設。
   WAF対策＋抜粋にCSSが出る不具合の解消。
   ============================================ */
.skc .note{background:#f4f9f6;border:1px solid #cfe3d8;border-radius:8px;padding:14px 18px;font-size:1em}
.skc table{border-collapse:collapse;width:100%;font-size:1em;margin:1em 0}
.skc th,.skc td{border:1px solid #d5ccbe;padding:8px 10px;text-align:left}
.skc th{background:#eaf1f4}
.skc thead th{background:#f5e3e8;color:#8a4258;text-align:center}
.skc caption{text-align:left;font-size:.95em;color:#555;margin-bottom:6px}
.faq-q{font-weight:700;margin-top:1.2em}
.msakura{color:#C25F7C;font-weight:700}
.skc .cta-a8{text-align:center;margin:1.6em 0}
.skc .cta-a8 a{display:block;max-width:470px;margin:0 auto;background:#0077BE;color:#fff;text-decoration:none;font-weight:700;font-size:1.12em;line-height:1.6;padding:17px 26px;border-radius:60px;box-shadow:0 4px 12px rgba(0,90,150,.32);position:relative;overflow:hidden}
.skc .cta-a8 a::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:rotate(25deg);animation:ctaShine 4.5s ease-in-out infinite}
@keyframes ctaShine{0%{left:-70%}22%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion: reduce){.skc .cta-a8 a::after{animation:none}}
/* CTA上の説明（斜線＋黄色マーカー） */
.skc .cta-lead{display:inline-block;font-weight:700;font-size:.98em;color:#333;margin:0 0 10px;position:relative;padding:0 26px}
.skc .cta-lead .mk{background:linear-gradient(transparent 62%,#ffe89a 62%);padding:0 2px}
.skc .cta-lead::before,.skc .cta-lead::after{content:"";position:absolute;top:50%;width:14px;height:2px;background:#666;margin-top:-1px}
.skc .cta-lead::before{left:0;transform:rotate(58deg)}
.skc .cta-lead::after{right:0;transform:rotate(-58deg)}
.skc .cta-note{margin:9px 0 0;font-size:.85em;color:#8a8a8a}
.skc .cta-a8 a:hover{background:#005B8F;color:#fff}
.skc .caution{color:#b0506d;font-weight:700}
.skc .checklist{background:#fff;border:1px solid #d5ccbe;border-left:6px solid #2C6E88;border-radius:8px;padding:16px 20px;margin:1.4em 0}
.skc .checklist ul{list-style:none;padding-left:0;margin:0;display:flex;flex-wrap:wrap}
.skc .checklist li{width:50%;min-width:12em;padding:4px 0;line-height:1.7}
.skc .checklist li::before{content:"\2610";margin-right:.5em;color:#2C6E88;font-size:1.1em}
.skc .cmp th{width:auto}
.skc .cmp thead th{background:#f5e3e8;color:#8a4258;text-align:center}
.mship{color:#C25F7C;font-weight:700}
.skc .fac th{width:38%}
.skc .pickup{background:#fff;border:1px solid #d5ccbe;border-left:6px solid #C25F7C;border-radius:8px;padding:14px 18px;margin:1.4em 0}
.skc tr.done td{color:#999;background:#fafafa}
/* テーブルの列幅は記事ごとに異なるため個別指定 */
.postid-138 .skc th,.postid-109 .skc th,.postid-103 .skc th{width:40%}
.postid-59 .skc th{width:34%}