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

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
table {
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  position: relative;
  padding: 0.5em;
}
table th {
  background-color: var(--cocoon-xx-thin-color);
}
table tr:nth-of-type(2n+1) {
  background-color: var(--cocoon-xxx-thin-color);
}
table:not(.has-border-color) :where(th, td) {
  border: 1px solid var(--cocoon-x-thin-color);
}

.scrollable-table {
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
.scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child {
  background-color: #e9eff2;
  color: var(--cocoon-text-color);
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  z-index: 2;
}

.scrollable-table table {
  border-collapse: collapse;
  max-width: none;
  margin: 0;
}

.scrollable-table th {
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td {
  white-space: nowrap;
}

.scrollable-table .has-fixed-layout th,
.scrollable-table .has-fixed-layout td {
  white-space: normal;
}

.scrollable-table {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

figure.wp-block-table table {
  width: auto;
}

figure.wp-block-table.alignwide table,
figure.wp-block-table.alignfull table {
  width: 100%;
}

.main figure.wp-block-table {
  width: auto;
  max-width: 100%;
  display: block;
}

figure.wp-block-table table {
  margin-right: auto;
}
figure.wp-block-table.aligncenter table {
  margin-left: auto;
}
figure.wp-block-table.aligncenter figcaption {
  text-align: center;
}
figure.wp-block-table.alignright table {
  margin-left: 0;
}

.scroll-hint-icon-wrap {
  overflow: hidden;
}

.article {
  margin-bottom: 2em;
}
.article dd {
  margin-left: 40px;
}
.article ul li,
.article ol li {
  margin: 0em;
}
.article ul ul, .article ul ol,
.article ol ul,
.article ol ol {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}
.article .wp-block-gallery ul {
  padding-left: 0;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  line-height: 1.25;
  font-weight: bold;
}
.article h4,
.article h5,
.article h6 {
  font-size: 20px;
  padding: 9px 10px;
}
.article h1 {
  margin-left:50px;
}
.article h2 {
  font-size: 24px;
  padding: 25px;
  background-color: var(--cocoon-xx-thin-color);
  border-radius: var(--cocoon-badge-border-radius);
  margin-bottom:40px;
}
.article h3 {
  border-left: 7px solid var(--cocoon-middle-thickness-color);
  border-right: 1px solid var(--cocoon-thin-color);
  border-top: 1px solid var(--cocoon-thin-color);
  border-bottom: 1px solid var(--cocoon-thin-color);
  font-size: 22px;
  padding: 12px 20px;
}
.article h4 {
  border-top: 2px solid var(--cocoon-thin-color);
  border-bottom: 2px solid var(--cocoon-thin-color);
}
.article h5 {
  border-bottom: 2px solid var(--cocoon-thin-color);
}
.article h6 {
  border-bottom: 1px solid var(--cocoon-thin-color);
}
.article .column-wrap h1, .article .column-wrap h2, .article .column-wrap h3, .article .column-wrap h4, .article .column-wrap h5, .article .column-wrap h6 {
  margin-top: 0;
}



/************************************
** 子テーマ独自のスタイル（style.css）
************************************/

/* カスタムヘッダーの基本的なスタイル */
header.fixed {
    box-sizing: border-box;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
header.fixed .inner.cf {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 15px 20px;
    box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;
}
header.fixed .logo img {
    height: 50px; width: auto; max-width: 220px; object-fit: contain;
}
header.fixed .btns { display: flex; gap: 10px; align-items: center; }
header.fixed .btns .btn {
    padding: 8px 15px; border: 1px solid #fff; color: #fff; text-decoration: none; border-radius: 5px;
    transition: background-color 0.3s ease; white-space: nowrap;
}
header.fixed .btns .btn:hover { background-color: rgba(255, 255, 255, 0.2); }


#mv {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #fff; box-sizing: border-box;
}
#mvbg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;
    background-color: #000;
}
#mvbg video {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    transform: translate(-50%, -50%); object-fit: cover; z-index: -1;
}
#mv .txt {
    position: relative; z-index: 2; opacity: 1; transition: opacity 0.5s ease-out;
    padding: 20px; box-sizing: border-box; width: 100%;
}
#mv .txt h1 {
    font-size: 3.5em; margin-bottom: 20px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); line-height: 1.2;
}
#mv .txt p {
    font-size: 1.2em; line-height: 1.6; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#mv .scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}


#contents {
    background-color: #fff;
}
#contents .inner.cf {
    max-width: 1200px; margin: 0 auto;margin-top: 600px; padding: 0 20px; box-sizing: border-box;
}


/* その他のセクションの共通スタイル */
/* IDを新しいものに更新 */
#about-main .box, #about .box, #program .box, #oneday .box, #participation .box, #collaboration .box, #utilization .box, #purchase .box {
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    height: 260px; /* 各ボックスの高さ */
    text-decoration: none; position: relative; overflow: hidden; cursor: pointer;
}
/* ホバー時のオーバーレイ効果 */
/* IDを新しいものに更新 */
#about-main .box::before, #about .box::before, #program .box::before, #oneday .box::before,
#participation .box::before, #collaboration .box::before, #utilization .box::before, #purchase .box::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.3); z-index: 1; transition: background-color 0.3s ease;
}
/* IDを新しいものに更新 */
#about-main .box:hover::before, #about .box:hover::before, #program .box:hover::before, #oneday .box:hover::before,
#participation .box:hover::before, #collaboration .box:hover::before, #utilization .box:hover::before, #purchase .box:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
}
/* ボックス内のテキスト */
/* IDを新しいものに更新 */
#about-main .box .inner, #about .box .inner, #program .box .inner, #oneday .box .inner,
#participation h3, #collaboration h3, #utilization h3, #purchase h3 { position: relative; z-index: 2; color: #fff; padding: 20px; }
#contents .inner.cf > div {
    display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; width: 100%; box-sizing: border-box;
}
#contents .inner.cf > div > section.item { flex: 1; min-width: 300px; box-sizing: border-box; }

#news .box, #embed_fb .box, #profile .box {
    background-color: #f8f8f8; padding: 20px; box-sizing: border-box; height: 100%;
}
#news ol { list-style: none; padding: 0; margin: 0; }
#news li { margin-bottom: 15px; display: flex; gap: 10px; align-items: flex-start; }
#news li:last-child { margin-bottom: 0; }
#news li .ph { flex-shrink: 0; width: 80px; height: 60px; object-fit: cover; }
#news li p { margin: 0; font-size: 0.9em; line-height: 1.4; }
#news li a.boxAnchor { color: #333; text-decoration: none; font-weight: bold; }
#news li a.boxAnchor:hover { text-decoration: underline; }
#news li .info { font-size: 0.8em; color: #666; display: block; }

#embed_fb .box { display: flex; justify-content: center; align-items: center; min-height: 400px; flex-direction: column; }

#activity {
    position: relative;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; width: 100%; box-sizing: border-box;
}
#activity .item { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); box-sizing: border-box; }
#activity .item h3 { margin: 0; font-size: 1.5em; font-weight: normal; }
#activity .item h3 span { display: block; font-size: 0.6em; text-transform: uppercase; }
#activity h2 .btn {
    display: block; width: fit-content; margin: 30px auto; padding: 10px 20px;
    background-color: #333; color: #fff; text-decoration: none; border-radius: 5px; text-align: center;
}

/* 各項目の背景画像（linear-gradientを使用して画像と半透明色を重ねる） */
/* IDを新しいものに更新 */
#about-main .box { /* N=yatsugatakeとは？ - 透過なし、背景色指定 */
    background-image: url(http://project.nyatsugatake.jp/wp/wp-content/uploads/2025/06/future.jpg);
    background-color: rgba(247, 255, 250, 1);
}
#participation .box { /* 参加 - 赤色透過 */
    background-image: linear-gradient(rgba(255, 150, 150, 0.5), rgba(255, 150, 150, 0.3)), url(http://project.nyatsugatake.jp/wp/wp-content/uploads/2025/06/230906yatsusus_fujimiko-39.jpg);
}
#collaboration .box { /* 連携 - 黄色透過 */
    background-image: linear-gradient(rgba(255, 255, 100, 0.5), rgba(255, 255, 100, 0.3)), url(http://project.nyatsugatake.jp/wp/wp-content/uploads/2025/06/LP231120yatsusus_press-66-1.jpg);
}
#utilization .box { /* 活用 - 青色透過 */
    background-image: linear-gradient(rgba(150, 150, 255, 0.5), rgba(150, 150, 255, 0.3)), url(http://project.nyatsugatake.jp/wp/wp-content/uploads/2025/06/LP231120yatsusus_press-15.jpg);
}
#purchase .box { /* 購入 - 緑色透過 */
    background-image: linear-gradient(rgba(80, 128, 80, 0.5), rgba(80, 128, 80, 0.3)), url(http://project.nyatsugatake.jp/wp/wp-content/uploads/2025/06/LP20230801-110.jpg);
}

/* フッターのスタイル */
footer {
    color: #eee;
    padding: 40px 20px;
    text-align: center;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
}
footer .inner { max-width: 1200px; margin: 0 auto; padding: 0; }
footer nav ul { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; justify-content: center; gap: 15px; }
footer nav a { color: #eee; text-decoration: none; font-size: 0.9em; }
footer .sns { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; justify-content: center; gap: 15px; }
footer .sns img { width: 40px; height: 40px; transition: transform 0.2s ease; }
footer .sns img:hover { transform: scale(1.1); }
footer address { font-style: normal; font-size: 0.9em; margin-bottom: 10px; }
footer .copy { font-size: 0.8em; color: #aaa; }
footer .copy a { color: #aaa; text-decoration: underline; }
footer .copy a:hover { color: #fff; }

/* ページトップボタン */
#pagetop { position: fixed; bottom: 20px; right: 20px; z-index: 9000; }
#pagetop .btn_top {
    display: block; width: 50px; height: 50px; background-color: rgba(0,0,0,0.5); border-radius: 50%;
    text-align: center; line-height: 50px; color: #fff; font-size: 1.5em; text-decoration: none; transition: background-color 0.3s ease;
}
#pagetop .btn_top:hover { background-color: rgba(0,0,0,0.8); }

/* モバイルメニューのスタイル */
#menu {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 999999;
    display: none; justify-content: center; align-items: center; color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#menu .btn_close { position: absolute; top: 20px; right: 20px; z-index: 1000; cursor: pointer; }
#menu nav { width: 80%; max-width: 400px; text-align: center; }
#menu nav ul { list-style: none; padding: 0; margin: 0; }
#menu nav li { margin-bottom: 15px; }
#menu nav a { display: block; padding: 10px 0; color: #fff; text-decoration: none; font-size: 1.2em; transition: background-color 0.2s ease; }
#menu nav a:hover { background-color: rgba(255, 255, 255, 0.1); }
#menu nav a .jp { display: block; font-size: 0.7em; opacity: 0.7; }
#menu_sns { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
#menu_sns .btn img { width: 40px; height: 40px; }

/* レスポンシブデザインの調整 */
@media screen and (max-width: 1023px){
    header.fixed .logo img { height: 40px !important; max-width: 180px !important; }
    header.fixed .btns .btn { padding: 6px 12px; font-size: 0.9em; }
    header.fixed .btns { margin-left: 0 !important; }
}
@media screen and (max-width: 834px){
    #mv { height: 70vh !important; }
    #mv .txt h1 { font-size: 2em !important; }
    #mv .txt p { font-size: 0.9em !important; }
    #contents .inner.cf { padding: 0 15px !important; }
    #contents .inner.cf > div { flex-direction: column !important; gap: 15px !important; }
    #contents .inner.cf > div > section.item { min-width: unset !important; width: 100% !important; max-width: 100% !important; }
    #activity .item { flex: 1 1 100% !important; max-width: 100% !important; }

    #action-area-link { width: 250px; height: 250px; }
    #overlay-action-area { font-size: 2em; }
    #overlay-action-area p .an { font-size: 0.5em; }
}
@media screen and (max-width: 480px){
    header.fixed .logo img { height: 35px !important; max-width: 150px !important; }
    header.fixed .btns .btn { font-size: 0.8em; padding: 5px 10px; }
    #action-area-link { width: 180px; height: 180px; }
    #overlay-action-area { font-size: 1.5em; }
    #overlay-action-area p .an { font-size: 0.6em; }
}

/************************************
** project.nyatsugatake.jp個別投稿ページ用カスタムスタイル
** (yatsugatakesustainablelab.jp のスタイルに合わせる)
************************************/

/* --- サイト全体の基本フォントと行間、背景色 --- */
/* Cocoonの :root 変数や body に !important がついている場合があるため、詳細度を上げる */
body.single.sng-page { /* 個別投稿ページにのみ適用 */
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    font-size: 16px !important; /* yatsugatakesustainablelab.jp の本文の目安 */
    line-height: 1.8 !important;
    color: #333 !important; /* 基本の文字色 */
    background-color: #f8f8f8 !important; /* ページの背景色 */
}

/* --- コンテンツ領域の調整 --- */
/* Cocoonの.mainのパディングや幅を調整 */
body.single.sng-page .main {
    padding: 30px 20px !important; /* 左右のパディング調整 */
    max-width: 800px !important; /* コンテンツの最大幅を調整（yatsugatakesustainablelab.jpの目安） */
    margin: 20px auto !important; /* 中央寄せ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を追加 */
    border-radius: 8px; /* 角丸を追加 */
    background-color: #fff !important; /* コンテンツ領域の背景色 */
}
/* サイドバーがない場合の調整 */
body.single.sng-page.no-sidebar .main {
    width: auto !important; /* max-widthに合わせるためautoに */
}

/* --- 見出しのスタイル (h1, h2, h3, h4) --- */
/* 個別投稿ページのh1 (記事タイトル) */
body.single.sng-page .entry-title {
    font-size: 28px !important; /* yatsugatakesustainablelab.jp の記事タイトル目安 */
    font-weight: bold !important;
    line-height: 1.3 !important;
    color: #333 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important; /* タイトル下の余白 */
    padding-left: 0 !important; /* 元のCocoonのパディングを削除 */
}

/* 本文中のh2 */
body.single.sng-page .article h2 {
    font-size: 24px !important; /* yatsugatakesustainablelab.jp のh2目安 */
    font-weight: bold !important;
    color: #333 !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    padding: 0 !important; /* 背景色やパディングを削除してシンプルに */
    background-color: transparent !important; /* 背景色を透明に */
    border-radius: 0 !important; /* 角丸を削除 */
    border: none !important; /* ボーダーを削除 */
    position: relative; /* 下線のためにposition設定 */
}
body.single.sng-page .article h2::after { /* シンプルな下線 */
    content: "";
    display: block;
    width: 60px; /* 下線の長さ */
    height: 3px; /* 下線の太さ */
    background-color: #777; /* 下線の色 */
    margin-top: 10px; /* 見出しとの間隔 */
    margin-left: 0;
}

/* 本文中のh3 */
body.single.sng-page .article h3 {
    font-size: 20px !important; /* yatsugatakesustainablelab.jp のh3目安 */
    font-weight: bold !important;
    color: #333 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    padding: 0 !important; /* ボーダーやパディングを削除してシンプルに */
    border: none !important;
}

/* 本文中のh4 */
body.single.sng-page .article h4 {
    font-size: 18px !important; /* yatsugatakesustainablelab.jp のh4目安 */
    font-weight: bold !important;
    color: #333 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: none !important;
}

/* --- 本文 (pタグ) --- */
body.single.sng-page .entry-content p {
    margin-bottom: 1em !important; /* 段落間の余白 */
    line-height: 1.8 !important; /* 行間 */
}

/* --- リスト (ul, ol) --- */
body.single.sng-page .entry-content ul,
body.single.sng-page .entry-content ol {
    margin-bottom: 1em !important; /* リスト下の余白 */
    padding-left: 25px !important; /* リストのインデント */
}
body.single.sng-page .entry-content ul li,
body.single.sng-page .entry-content ol li {
    margin-bottom: 0.5em !important; /* 各リストアイテム間の余白 */
    line-height: 1.6 !important; /* リストアイテムの行間 */
}

/* --- リンクの色 --- */
body.single.sng-page a {
    color: #007bff !important; /* 例: 青色 */
    text-decoration: none !important; /* 下線なし */
}
body.single.sng-page a:hover {
    color: #0056b3 !important; /* ホバー時の色を少し濃く */
    text-decoration: underline !important; /* ホバー時に下線を表示 */
}

/* --- 画像の調整 --- */
/* wp-caption (キャプション付き画像) */
body.single.sng-page .wp-caption {
    margin: 1.5em auto !important; /* 上下のマージンと中央寄せ */
    border: none !important; /* ボーダー削除 */
    background-color: transparent !important; /* 背景透明 */
    box-shadow: none !important; /* 影削除 */
    max-width: 100% !important;
    width: auto !important; /* 画像幅に合わせる */
}
body.single.sng-page .wp-caption img {
    border-radius: 0 !important; /* 角丸削除 */
    box-shadow: none !important; /* 影削除 */
}
body.single.sng-page .wp-caption .wp-caption-text {
    font-size: 0.8em !important;
    color: #666 !important;
    text-align: center !important;
    margin-top: 5px !important;
}

/* --- その他の調整 (必要に応じて) --- */
/* 引用 (blockquote) */
body.single.sng-page blockquote {
    background-color: #f5f5f5 !important;
    border-left: 5px solid #ccc !important;
    padding: 1.2em !important;
    margin: 1.5em 0 !important;
}
body.single.sng-page blockquote::before, body.single.sng-page blockquote::after {
    display: none !important; /* 引用符を非表示 */
}

/* ソースコード (preタグ) */
body.single.sng-page pre {
    background-color: #eee !important;
    border: 1px solid #ddd !important;
    padding: 1em !important;
    overflow: auto !important;
    border-radius: 4px !important;
}

/* テーブル */
body.single.sng-page table th,
body.single.sng-page table td {
    padding: 0.8em !important;
    border: 1px solid #ddd !important;
}
body.single.sng-page table th {
    background-color: #f2f2f2 !important;
}
body.single.sng-page table tr:nth-of-type(2n+1) {
    background-color: #fafafa !important;
}

/* --- レスポンシブデザインの調整 (PCとモバイルで共通の変更も含む) --- */
@media screen and (max-width: 834px) {
    body.single.sng-page .main {
        padding: 20px 15px !important; /* モバイルでのパディング調整 */
        margin: 10px 0 !important; /* モバイルでのマージン調整 */
    }
    body.single.sng-page .entry-title {
        font-size: 24px !important;
    }
    body.single.sng-page .article h2 {
        font-size: 20px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }
    body.single.sng-page .article h3 {
        font-size: 18px !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }
    body.single.sng-page .article h4 {
        font-size: 16px !important;
        margin-top: 15px !important;
        margin-bottom: 8px !important;
    }
    body.single.sng-page .entry-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    body.single.sng-page .entry-content ul,
    body.single.sng-page .entry-content ol {
        padding-left: 20px !important;
    }
}
@media screen and (max-width: 768px) {
	.header-container-in.hlt-top-menu .logo-header img{
		max-height: 60px;
		height: auto;
		vertical-align: middle;
		margin-left: -200px;
	}
}


@media screen and (max-width: 480px) {
    body.single.sng-page .entry-title {
        font-size: 20px !important;
    }
    body.single.sng-page .article h2 {
        font-size: 18px !important;
    }
    body.single.sng-page .article h3 {
        font-size: 16px !important;
    }
    body.single.sng-page .article h4 {
        font-size: 15px !important;
    }
    body.single.sng-page .entry-content p {
        font-size: 14px !important;
    }
}

/* --- リードテキストセクションのスタイル --- */
#lead-text-section {
    background-color: #fcfcfc; /* わずかに異なる背景色で独立性を示す */
    padding: 60px 20px; /* 上下の余白 */
    text-align: center; /* テキスト中央寄せ */
    margin-bottom: 0; /* 下のマージンをリセット */
    box-sizing: border-box;
}

#lead-text-section .lead-text-inner {
    max-width: 900px; /* テキストの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    color: #555;
    font-size: 18px; /* テキストのサイズ */
    line-height: 1.8; /* 行間 */
}

#lead-text-section .lead-text-inner p {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    padding: 0;
}

/* モバイルでの調整 */
@media screen and (max-width: 834px) {
    #lead-text-section {
        padding: 40px 15px; /* モバイルでの余白 */
    }
    #lead-text-section .lead-text-inner {
        font-size: 15px; /* モバイルでのテキストサイズ */
        line-height: 1.6;
    }
}
@media screen and (max-width: 480px) {
    #lead-text-section {
        padding: 30px 15px; /* さらに狭いモバイルでの余白 */
    }
    #lead-text-section .lead-text-inner {
        font-size: 14px;
    }
}