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

/************************************
** 全体
************************************/
body{
	margin-top:0;

}
.page h2, .page h3, .page h4 {
    /*text-align: center;*/
    background: transparent !important;
    color: #664400;
	margin-bottom:0;
	padding-bottom:0;
	border: none;
}

.page .subtitle {
    color: #ff8000;
    font-weight: 800;
}

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

.head_cover {
    height: 350px;
	min-height:unset
}

.footer h3 {
    color: #fff;
    font-size: 16px !important;
    font-weight: 400;
}

#footer {
    margin-top: -1.8em;
	padding-top: 2em;
}

h2.miner_title {
  position: relative;
  padding-bottom: 8px;
  color: #5b3700; /* 文字色（茶系） */
  font-weight: bold;
  padding-bottom: 0.5em;
  padding-left: 0;
    margin-bottom: 1em;
}

.miner_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #ffa500 20%, #f8d394 20%); 
  /* 濃いオレンジ→薄オレンジ */
}

.paragraph p{
font-size:16px;
}

.sub-paragraph p{
	font-size:14px;
}

.paragraph-margin{
	margin-bottom:1rem;
}


div#go-to-top {
    margin-right: 0.5em;
}


/*----------------------------------------
/* レスポンシブデザイン用のメディアクエリ *
----------------------------------------*/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
	
.page h2, .page h2 span{
	font-size:20px !important;
}
.head_cover {
    height: 200px;
}
}
/* 全ての固定ページで日付を非表示にする */
.page .date-tags {
display: none;
}
div#header-in {
    margin-bottom: 10px;
}

.content {
  margin-top: 0;
}
.content-in {
    width: auto;
}

.main {
    padding: 0;
	border:none;
}
#main {
	padding:0;
}
.entry-content {
    margin-top: 0;
}

article#post-9 {
    margin-bottom: 0;
}
.copyright a {
    color: #333;
    text-decoration: none;
}

#bottom-forest {
    margin-bottom: 0;
}

div#footer-in {
    width: 100%;
}

/* CSS */
.map-responsive {
  position: relative;
  width: 100%;             /* 親の幅いっぱい */
  padding-top: 56.25%;     /* 16:9 の縦横比を維持（450÷800＝0.5625）*/
  overflow: hidden;
}

.map-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#text-2, #text-4, #menu-sub, #menu-sub-1{
    font-size: 13px;
	font-weight:500;
}
/* 必要ならリスト全体の行間も詰める */
#menu-sub, #menu-sub-1 {
    line-height: 0.2;
}
/* サブメニューのリンク装飾調整 */
#menu-sub a, #menu-sub-1 a {
  background: none !important;       /* ホバー時の背景色を消す */
  transition: none;                  /* ホバー時のトランジションを無効に */
}

#menu-sub a:hover, #menu-sub-1 a:hover {
  background: none !important;       /* ホバー時も背景なし */
  text-decoration: underline;        /* ホバー時も下線維持 */
}
/* リストアイテムの上下パディングを詰める */
#menu-sub li, #menu-sub-1 li {
  margin: 0;             /* デフォルトのマージンをリセット */
  padding: 0;      /* 上下 0.2em、左右はそのまま */
}
aside#media_image-2 {
    margin-top: 2em;
}
aside#nav_menu-2 {
    margin-top: 2em;
    margin-left: 1em;
}
/* フッター左のロゴ画像サイズ調整 */
#media_image-2 img {
  width: 200px;    /* お好みの幅に */
  height: auto;    /* アスペクト比を維持 */
  max-width: none; /* 既存の max-width 制約を解除 */
}

/* ナビ本体と各 li にオーバーフローを許可 */
#navi,
#navi-in,
#menu-main,
#menu-main > li {
  overflow: visible;
  height: auto;
  line-height: normal;
}

#menu-main > li {
width:150px;
}

/* ナビ下端に波オーバーレイを常時表示 */
#navi {
  position: relative; /* 擬似要素の基準に */
  overflow: visible;
    margin-bottom: 5px;

}
#navi::after {
	display:none;
    content: "";
    position: absolute;
    bottom: -96px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    max-width: none;
    height: 100%;
    background: url(https://mnur.jp/test_gqwkr7b8xxxnb/wp-content/uploads/2025/05/slide-top.png) no-repeat center top;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.menu-icon {
    margin-bottom: 0.5em;
}
#navi .item-label .item-label{
    font-weight: 700;
    line-height: 1.2;
}
#navi .item-description {
    font-weight: 500;
    font-size: 12px;
    color: #B68C72;
}
/* クリック領域を縦方向に拡張 */
#menu-main .menu-item-contact > a {
  display: flex;
  flex-direction: column;    /* 縦に並べる */
  align-items: center;       /* 左右中央揃え */
  justify-content: flex-start;
  padding: 0.5em 1em;        /* 内側余白を再設定 */
  text-decoration: none;
  background: transparent;   /* グレー背景を消す */
}

/* アイコン・日本語・英語の間隔 */
#menu-main .menu-item-contact .menu-icon     { 
	margin-bottom: .4em;
}
#menu-main .menu-item-contact .item-label    {
	margin-bottom: .2em; 
}
#menu-main .menu-item-contact .item-description {
	margin: 0; 
}

/* 前面に出したい場合は z-index */
#menu-main .menu-item-contact {
  position: relative;
  z-index: 10;
}

/*━━━━━━━━ ヘッダ一帯で はみ出し許可 ━━━━━━━━*/
#header-container,
#header-container-in,
#header,
#header-in,
#navi,
#navi-in,
#menu-main,
#menu-main > li      { overflow: visible!important; }

/*━━━━━━━━ HOME li を基準にし、行高をキープ ━━━━━━━━*/
.home-icon-li{
  position: relative;
  height: 48px;          /* ほかの li と同じ行高に固定               */
  line-height: 48px;     /* （テキストがあれば）垂直中央になるよう   */
  z-index: 10;           /* 前面へ                                     */
}

/*━━━━━━━━ アイコンだけ拡大＋下へ“ぶら下げる” ━━━━━━━━*/
.home-icon-li .home-icon img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
    width: 200px;
    height: auto;
    pointer-events: none;
}

/*━━━━━━━━ 背景や枠線がかぶる場合は透明化 ━━━━━━━━*/
.home-icon-li,
.home-icon-li > a,
.home-icon-li::before,
.home-icon-li > a::before{
  background: transparent!important;
  box-shadow: none!important;
}

/* 例：HOME だけ横幅 160px にする */
li#menu-item-28 {
    flex: 0 0 200px;
}

/************************************
** トップ
************************************/
/* 全体 */
div#main_content {
    max-width: 900px;
    margin: auto;
}

/* サブタイトル */
.subtitle {
  display: block;
  font-size: 0.8em;       /* h2 より一段小さく */
  color: #666;              /* 好みのグレー等 */
  text-align: center;       /* 中央揃え */
  font-weight: normal;      /* h2 の太さと差をつける */
  letter-spacing: .05em;    /* 文字間を少し広げる */
}

.entry-content.cf {
    margin-bottom: 0;
}

/*----------------------------------------
/* スライダー                           *
----------------------------------------*/
/* スライダー土台 */
.hero-slider {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 7 / 20);
  overflow: hidden;
  margin-bottom: 0;
}

/* スライド画像 */
.hero-slider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 3s ease;
}
.hero-slider .slide.active {
  opacity: 1;
}

/* 下端オーバーレイ */
.hero-slider .overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;             /* 好きな高さに */
  object-fit: contain;
  object-position: bottom center;
  z-index: 10;
  pointer-events: none;
}

/* 上端オーバーレイ */
.hero-slider {
  position: relative;
  /* 既存の設定はそのまま */
}

/*----------------------------------------
/* ニュースリスト                       *
----------------------------------------*/
/* UL を中央揃え */
#news_list .my-latest-posts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
}
#news_list .news-list {
    position: relative;
    z-index: 10;
}
/* リンク全体をフレックス化 */
#news_list .my-latest-posts .post-link {
  display: flex;
  align-items: center;
  gap: 2em;                  /* 日付⇔タイトルの隙間 */
  padding: 0.2em 1em;
  text-decoration: none;
  color: inherit;
}

/* ホバー時の背景色 */
#news_list .my-latest-posts .post-link:hover {
  background-color: #f5f5f5;
}

/* 日付を固定幅＋折返し禁止 */
#news_list .my-latest-posts .post-date {
  flex: 0 0 100px;           /* ← 必要に応じて幅を調整 */
  white-space: nowrap;
}

/* タイトルは残り幅を全部使って左揃え */
#news_list .my-latest-posts .post-title {
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
}

/* 「もっと読む」ボタンを中央揃え */
#news_list .wp-block-buttons {
  display: flex;
  justify-content: center;
}

/* ボタンの背景色・下部破線・余計な罫線なし */
#news_list .wp-block-button__link {
    background-color: transparent;
    border: none;
    border-bottom: 2px dashed #664400;
    color: #664400;
    text-decoration: none;
    border-radius: 4px;
    transition: background .2s;
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    font-size: 16px;
}
#news_list .wp-block-button__link:hover {
    color: #ff4500;
}

/* 親セクションが overflow: visible であることを確認 */
#news_list {
  overflow: visible;
  position: relative; /* 必要に応じて stacking context を作成 */
}

a.post-link {
  display: block;
  white-space: normal;
  overflow: hidden;
}

span.post-title {
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}


/*------------------------------------------------
  ニュースボックスに “ダミー余白” を自動付与
------------------------------------------------*/
.news-box {
    --laputa-h: 190px;
    --laputa-up: -258px;
    position: relative;
    padding-bottom: -5px;
    margin-bottom: -214px;
    z-index: 1;
}

/*------------------------------------------------
  laputa 画像を全幅で中央に貼り付け
------------------------------------------------*/
.news-box .laputa{
  position:absolute;
  left:50%;  transform:translateX(-50%);
  bottom:calc(-1 * var(--laputa-up));   /* figure を好きなだけ上下へ */
  width:100vw;   max-width:none;
  margin:0;      z-index:5;
}

/*------------------------------------------------
  ベージュ帯（laputa の内側 ::after）
------------------------------------------------*/
.news-box .laputa{
  position:relative;   /* ↓ 擬似要素の基準点に */
}
.news-box .laputa::after{
  content:"";
  position:absolute;
  left:0;  width:100%;
  bottom:-166px;           /* 常に画像の下端基準         */
  height:var(--laputa-h);
  background:#e2d9c3;
  z-index:-1;         /* 背景として背面へ            */
}



/*----------------------------------------
/* Moose Nursery ?                      *
----------------------------------------*/
/* ムースナーサリー紹介セクション ─ 背景を全幅にする */
#what_moose_nursery{
  position: relative;          /* 擬似要素の基準に           */
  z-index: 1;                  /* （他セクションより前面へ） */
}

/* 擬似要素で全幅背景 */
#what_moose_nursery::before{
  content:"";
  position: absolute;
  top: 0;
  left: 50%;                   /* 中央を起点に                */
  width: 100vw;                /* ビューポート幅いっぱい      */
  height: 100%;                /* セクション高さぶん           */
  transform: translateX(-50%); /* 画面の中央合わせ             */
  background: #e2d9c3;         /* ご指定の色                   */
  z-index: -1;                 /* 本文の後ろ (背景)            */
}



/* 見出し */
#what_moose_nursery h2 {
  text-align: center;
  margin-bottom:0;
  padding-bottom:0
}

/*------------------------------------------
  「ムースナーサリーとは」セクション専用
------------------------------------------*/
/* ───────── about セクション ───────── */
#what_moose_nursery {
    position: relative;
    padding-bottom: 60px;
margin-bottom: 140px;
}

/* 下端に貼り付ける波画像 */
#what_moose_nursery::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -160px;
    width: 100vw;
    max-width: none;
    height: 160px;
    background: url(https://mnur.jp/test_gqwkr7b8xxxnb/wp-content/uploads/2025/05/about-bottom-line.png) center / cover no-repeat;
    pointer-events: none;
    z-index: 5;
}

/* (※1) テーマが左右に余白を入れる場合は  
   left:0; width:100%; でもかまいません。 */

/*----------------------------------------
/* About Moose Nursery ?                *
----------------------------------------*/
/* 見出し */
#about_moose_nursery h2 {
  text-align: center;
  margin-bottom:0;
  padding-bottom:0
}
#about_moose_nursery h3 {
	font-size: 16px;
}

#about_moose_nursery p.sentence {
  display: block;                 /* ブロック要素化 */
  width: fit-content;             /* テキスト幅に合わせたい場合 */
  margin: 0 auto;                 /* 左右中央寄せ */
  font-size: 16px;
  border-bottom: 1px dashed #333;
}
#about_moose_nursery .left-hand {
  /* shrink-to-fit */
  width: fit-content;
  /* 左端揃えのままに */
  margin: 0;
  /* ブロックではなくインラインブロックにしてもOK */
  display: inline-block;
}




/* Flex レイアウトなら gap */
#about_moose_nursery .wp-block-columns {
  display: flex;
  gap: 4rem; /* カラム間のスペースを 2rem に */
}

/* 各 .about_content を相対位置付け */
#about_moose_nursery .about_content {
  position: relative;
}

/* 画像の角を丸く */
#about_moose_nursery .left_image img,
#about_moose_nursery .right_image img {
  border-radius: 51px; /* お好みの角丸量に調整 */
  display: block;
}

/* オーバーレイ画像（左下） */
#about_moose_nursery .left_image_overlay {
  position: absolute;
    bottom: 74px;
    left: -1em;
  z-index: 2;
}

/* オーバーレイ画像（右下） */
#about_moose_nursery img[title="right_image_overlay"] {
    position: absolute;
    bottom: 107px;
    right: -1em;
    z-index: 2;
}

/* リンクのアンダーラインを消す */
#about_moose_nursery .about_content a {
  text-decoration: none;
}

/* 指定の段落をダークグレーに */
#about_moose_nursery .about_content a > p {
  color: #333;
}



/**
 * Contact Form 7 "フリガナ"のバリデーション追加
 */
/* 不正対策キャプチャラベル内の縦並び対応 */
label:has(.wpcf7-captchac) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* キャプチャ画像に上下マージン */
.wpcf7-captchac {
  margin-top: 1em; /* 上下8px、左右0 */
}

/*----------------------------------------
/* レスポンシブデザイン用のメディアクエリ *
----------------------------------------*/
@media screen and (max-width: 1500px){
  /*必要ならばここにコードを書く*/
.news-box {
    --laputa-h: 183px;
    --laputa-up: -228px;
	padding-bottom:20px;
}
}
@media screen and (max-width: 1242px){
  /*必要ならばここにコードを書く*/
.news-box {
    --laputa-h: 181px;
    --laputa-up: -198px;
    padding-bottom: 38px;
}
}
@media screen and (max-width: 1074px){
  /*必要ならばここにコードを書く*/
.news-box {
    --laputa-h: 178px;
    --laputa-up: -173px;
    padding-bottom: 58px;

}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.news-box {
	--laputa-h: 177px;
    --laputa-up: -156px;
	padding-bottom: 69px;

}
.tagline {
    display: none;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
.moble_none {
    display: none;
}
.mobile_center img{
    margin: auto;
}

}

@media screen and (max-width: 823px){
  /*必要ならばここにコードを書く*/
.news-box {
        --laputa-h: 177px;
        --laputa-up: -140px;
        padding-bottom: 91px;
}

}

@media screen and (max-width: 715px){
  /*必要ならばここにコードを書く*/
.news-box {
        --laputa-h: 174px;
        --laputa-up: -120px;
        padding-bottom: 112px;
    }
}

@media screen and (max-width: 553px){
  /*必要ならばここにコードを書く*/
.news-box {
        --laputa-h: 172px;
        --laputa-up: -98px;
        padding-bottom: 131px;
    }
}

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

@media screen and (max-width: 457px){
  /*必要ならばここにコードを書く*/
    .news-box {
        --laputa-h: 172px;
        --laputa-up: -73px;
        padding-bottom: 157px;
    }
}

@media screen and (max-width: 288px){
  /*必要ならばここにコードを書く*/
    .news-box {
        --laputa-h: 169px;
        --laputa-up: -45px;
        padding-bottom: 182px;
    }
}

/************************************
** 園の概要
************************************/

/*----------------------------------------
/* レスポンシブデザイン用のメディアクエリ *
----------------------------------------*/
/*1023px以下*/
@media screen and (max-width: 1023px){
	.mobile_width{
    margin-left: 1em !important;
    margin-right: 1em !important;
}
}

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

.tagline {
    display: none;
}
	
#navi-menu-content {
    background-color: #664400;
    color: #fff;
}
#navi-menu-content li {
	border-bottom:1px dashed #efefef;
	padding: 15px 0;
}
#navi-menu-content a {
	color: #fff !important;
}
}

body.blog #content, body.single #content{
	padding-bottom:2em;
}
body.blog #main, body.single #main{
	    width: 100%;
  margin-top: 2em !important;
  padding-left:1em;
    padding-right: 1em;
  z-index:1;
}

body.blog .info-list-item-categorys, body.single .info-list-item-categorys {
    display: none;
}
body.blog .entry-card-thumb, body.single .entry-card-thumb {
  display: none !important;
}

body.blog .entry-card .entry-card-content, 
body.single .entry-card .entry-card-content {
  width: 100% !important;
  margin-left: 0 !important;

}

body.blog .content-in.wrap, body.single .content-in.wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
}

body.blog .main, body.single .main {
  max-width: 760px;
}

body.blog .sidebar, body.single .sidebar {
  width: 400px;
}

.entry-categories-tags.ctdt-one-row {
    display: none;
}

/* デフォルトでは非表示（PC） */
.br-sp {
  display: none;
}

@media screen and (max-width: 834px) {
  .br-sp {
    display: block;
  }
	.mobile-font, .mobile-font p, .mobile-font span{
		font-size: 15px !important;
	}
}