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

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

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');





/*============================
** ヘッダーとメニュー
=============================*/

/*PC*/
/* ヘッダーを透過 */
#header-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
}

/* 内側も透過 */
#header-container-in {
  background: transparent;
}


/*============================
  モバイルヘッダー透過
=============================*/
@media screen and (max-width: 768px) {

/* ヘッダーを透過 */
.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
}

/* 内側も透過 */
.logo-menu-button.menu-button {
  background: transparent;
}




/* モバイルヘッダー：FVに重ねる */

 
  body.home {
    padding-top: 0 !important;
  }

  body.home #container,
  body.home #content,
  body.home .content,
  body.home .content-in,
  body.home main.main,
  body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.home #header-container {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  body.home .fv {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

   body.home .wrap,
  body.home article.article {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* モバイルヘッダー高さ分の余白を消す */
@media screen and (max-width: 1023px) {

  body.home.mblt-header-mobile-buttons,
  body.home.mblt-header-and-footer-mobile-buttons {
    margin-top: 0 !important;
  }

}

 /* adminバーの余白を消す */
  .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
    margin-top: 0px !important;
  }

  		@media screen and ( max-width: 782px ) { html { margin-top: 0px !important; } }


  /* ヘッダー全体 */
  ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    /* 半透明背景 */
    background: rgba(255,255,255,0.22) !important;

    /* ガラス感 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* 境界線・影削除 */
    box-shadow: none !important;
    border: none !important;
  }

  /* ボタン個別 */
  ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button li,
  ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button .menu-button,
  ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button .logo-menu-button {

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

}


/* =========================
   モバイルヘッダーボタン アイコン調整
========================= */
@media screen and (max-width: 768px) {

  /* キャプション非表示 */
  .mobile-menu-buttons .navi-menu-caption {
    display: none !important;
  }

/* Font Awesome 非表示 */
.mobile-menu-buttons .menu-icon {
  display: none !important;
}

  /* メニューボタン */
  .navi-menu-button label.menu-open {
    position: relative;
  }

  /* 3本線 */
  .navi-menu-button label.menu-open::before {
    content: "";

    position: absolute;
    top: -20%;
    left: 50%;

    width: 24px;
    height: 18px;

      transform: translate(-50%, -50%);


    background:
      linear-gradient(#333,#333) top center/24px 1.5px no-repeat,
      linear-gradient(#333,#333) center/24px 1.5px no-repeat,
      linear-gradient(#333,#333) bottom center/24px 1.5px no-repeat;
  }


  /* ボタン高さ調整 */
  .mobile-menu-buttons .menu-button {
    height: 64px !important;

    display: flex;
    align-items: center;
    justify-content: center;
  }


}


/* =========================
   ヘッダーメニュー　ドロワー
========================= */

/* ドロワーメニューを最前面へ */
#navi-menu-content {
  z-index: 99999 !important;
}

/* 開閉ボタンより上 */
.navi-menu-content {
  z-index: 99999 !important;
}

/* ドロワー高さを自動化 */
#navi-menu-content,
.navi-menu-content {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* メニュー項目 */
.menu-drawer li {
  border-bottom: 1px solid #e5e5e5;
}

/* リンク */
.menu-drawer li a {
  position: relative;
  display: block;
  padding: 14px 16px 14px 34px;
}

/* ✦マーク */
.menu-drawer li a::before {
  content: "✦";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 10px;
  color: #999;
}

/* =========================
   モバイルフッター横並び
========================= */
@media screen and (max-width: 768px) {

  /* ボタン全体 */
  .mobile-footer-menu-buttons .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 53px !important;
  }

  /* アイコン */
  .mobile-footer-menu-buttons .menu-icon {
    font-size: 23px !important;
    line-height: 1;
    transform: scaleX(0.85);
  }

  /* キャプション */
  .mobile-footer-menu-buttons .menu-caption {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1;
    margin-top: 0 !important;
  }

  /* 縦並び解除 */
  .mobile-footer-menu-buttons .menu-button-in {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row !important;
    gap: 6px;
  }

   /* フッターボタン横幅を自動 */
  .mobile-footer-menu-buttons .menu-button {
    width: auto !important;
    min-width: unset !important;
    padding: 0 14px;
  }

  /* 中身 */
  .mobile-footer-menu-buttons .menu-button-in {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row !important;
    gap: 6px;

    white-space: nowrap;
  }

  /* キャプション改行禁止 */
  .mobile-footer-menu-buttons .menu-caption {
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
  }

  /* フッター全体 */
  .mobile-footer-menu-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

}


/* =========================
   モバイルは通常ヘッダーに戻す
========================= */
@media screen and (max-width: 768px) {



    /* PC用横並びメニュー解除 */
    .navi-in > ul {
        display: block !important;
    }

    /* 余白リセット */
    #header,
    #navi {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

}

/* スマホではPC用TOPヘッダーを非表示 */
@media screen and (max-width: 768px) {

    #header-container-in.hlt-top-menu,
    .hlt-top-menu,
    .header-container-in.hlt-top-menu {
        display: none !important;
    }

}


/*============================
** TOP FV（モバイルのみ）
=============================*/

/* スマホだけロゴ画像を70%に */
@media screen and (max-width: 768px) {

  .wp-image-898 {
    width: 65% !important;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }

  .fv {
    min-height: 80vh !important;

    /* これ追加 */
    margin-top: -60px !important;
    padding-top: 60px !important;
  }

}




/*============================
** TOPページ余白
=============================*/


/* main を上に引き上げないよう余白調整 */
.home main.main,
.front-page main.main {
  padding-top: 0 !important;
}


/* TOPページだけ main の上余白を消す */
.home main.main {
  padding-top: 0;
}

/* 固定フロントページの場合 */
.front-page main.main {
  padding-top: 0;
}

/*TOPページ以外はコンテンツの上に余白を入れる*/
/* PC */
body:not(.home) .content-in {
    padding-top: 80px !important;
}

/* タブレット */
@media screen and (max-width: 1105px) {
    body:not(.home) .content-in {
        padding-top: 120px !important;
    }
}

/* スマホ */
@media screen and (max-width: 768px) {
    body:not(.home) .content-in {
        padding-top: 64px !important;
    }
}


/*ブログのサイドバー余白*/
/* 記事ページ：サイドバーをアイキャッチ位置に揃える */
body.single .sidebar {
  padding-top: 110px !important;
}
 

/*============================
** フォント設定
=============================*/

/*見出しデザインのリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
background-color: transparent; /* 背景色を透明に*/
border: none; /*枠線なし*/
border-radius: 0; /*角の丸みなし*/
padding-left: 0px;
padding-right: 0px;s
	padding-bottom: 0px;
  margin-bottom: 5px !important;
}

.article h2 {
	font-size: 23px !important;
	color: #333;
	padding-top: 10px;
}


/*フォント設定*/
/* 本文 */
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    color: #444;
    line-height: 1.9;
}

/* メニュー */
.navi-in a {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.08em;
}

/* 見出し */
.article h1,
.article h2,
.article h3,
.entry-title,
.archive-title,
.widget-title {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* h4見出し お米アイコン */
.entry-content h4 {
  
  position: relative;
  padding-left: 20px;
}

/* お米アイコン */
.entry-content h4::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;

  transform: translateY(-50%);

  width: 25px;
  height: 25px;

  background-image: url("https://komekookashiju.com/wp-content/uploads/403cb17d9f4fac5a260c281ddb42e291.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/*字間*/
p, body {
letter-spacing: 1.5px;
}

h1, h2, h3 {
letter-spacing: 1.5px;
}


/*リンクホバー色*/
a:hover {
color: #fff;
transition : 0.5s;
}


/*============================
** チェックボックスの色
=============================*/

/* チェックボックス色変更 */
.is-style-vk-check-square-mark li::before {
  color: #947C5C !important;
  margin-top: 2px;
}



/*============================
** 細かい表示設定（フルワイド）
=============================*/

/*ヘッダーフッターまわりの調整*/
.breadcrumb,
.article-header,
.article-footer {
display: none;
}

.header-container-in {
padding-top: 10px;
padding-bottom: 10px;
}


/*セクションまわりの細々とした余白の調整*/
.main {
	border: none;
padding-bottom:0!important;
margin-bottom:0!important;
margin-left:0!important;
margin-right:0!important;
}


/*フルワイドと余白の調整*/
.wp-block-cover, .n2-section-smartslider {
margin-bottom:0!important;
margin-top:0!important;
padding-bottom:0!important;
bottom: 0;
}

.wp-block-columns {
margin-bottom:0!important;
}

.entry-content, .content {
padding-top:0!important;
padding-bottom:0!important;
margin-top:0!important;
margin-bottom:0!important;
}

.content-bottom {
margin:0;
}

.article {
padding-bottom:0px!important;
margin-bottom:0px!important;
}


/*フッター*/
.footer {
margin-top:0px;
}


/*SNSシェア非表示*/
.page .sns-share,
.page .sns-follow {
display: none ;
}

.veu_socialSet.veu_socialSet-position-after.veu_contentAddSection {
	display: none;
}


/*水平スクロールバー非表示*/
body {
overflow-x:clip;
font-size: 12px;
}


/*フルワイド*/
.fullwide {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
}


/*============================
** ブログ記事関係
=============================*/

/*ブログ記事一覧のカスタマイズ*/
.new-entry-cards {
margin: auto;
width: 110vh;
}

.new-entry-card-thumb {
transition-duration: 0.3s; /*アニメーションの時間*/ box-shadow: 0px 10px 10px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}

.new-entry-card-thumb:hover {
transform: translateY(-6px); /*マウスホバーで上に移動*/
box-shadow: 0px 5px 5px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}

.new-entry-card-thumb img { /*画像下の隙間を消す*/
vertical-align: bottom;
}

.widget-entry-card-thumb {
width: 200px !important;
}

.new-entry-card-title {
margin-top: 5px; /*上に余白を付ける*/
line-height: 1; /*行間を広く*/
font-size: 14px !important;
padding-bottom: 0px!important;
}

.is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title {
height: 1.5em;
}

/*タイトルと日付の間の調整*/
.new-entry-card-title:hover {
color: #85A4B5 ;/*マウスホバー時の色*/
}

/*記事一覧の投稿日表示カスタム*/
/*ウィジェット記事の投稿日・更新日を表示*/
.widget-entry-card-date {
display:block;
text-align: right;/*右寄せ*/
}

/*更新日を非表示にする*/
.widget-entry-card-update-date{
display: none;
}

/*日付にアイコン追加*/
.widget-entry-card-post-date::before,

.widget-entry-card-update-date::before{
font-family: "Font Awesome 5 Free";
padding-right: 3px; /*右余白*/
font-size:10px;
}

/*更新日アイコン*/
.widget-entry-card-update-date::before{
font-weight:bold;
content: "\f1da"; /*fa-historyアイコン*/
}

/* ブログカード hover の背景を消す */
.a-wrap:hover {
  background-color: transparent !important;
}

/*レスポンシブ*/
@media screen and (max-width: 768px){
.new-entry-cards {
margin: auto;
width: 45vh;
}
.new-entry-card-title {
font-size: 12px; /*スマホでの文字の大きさ*/
padding-left:5px;
line-height: 1.2; /*スマホでの行間*/
}

.e-card-info {
color: #666 ; /*色を薄く*/
}

.new-entry-card-snippet { padding-left: 5px; font-size: 10px; } 
.e-card-info {font-size: 11px; /*スマホでの文字サイズ*/}
}



/*記事一覧カスタマイズ終わり*/







/* Font Awesome 用のフォントを正しく指定（!important で全体フォントより優先） */
.fa,
.fas,
.far {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;  /* 太めでOKならこのまま。細くしたければ 400 に */
}

/* ブランドアイコン（LINE / Instagram 用） */
.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}




/*Youtube動画位置調整*/
/* Cocoon の video-container が左寄せになるのを防ぐ */
.wp-block-embed__wrapper .video-container {
  margin: 0 auto !important;
}



/* 記事ページ */
/* カテゴリーバッジ下の余白 */
.entry-categories-tags.ctdt-one-row {
	margin-bottom: 5px !important;
}

/*アイキャッチ見た目*/
.single .eye-catch-wrap{
  margin: 15px 0 15px;
}
.single .eye-catch img{
  width: 100%;
  height: auto;
  display: block;
}
.my-post-topmeta {
	margin-bottom: 10px !important;
}



/* ===== 投稿メタ全体 ===== */
.my-post-meta{
  margin: 16px 0 24px;
}

/* 上段（日付・カテゴリ・タグ） */
.my-post-meta-top{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* カテゴリ */
.my-meta-cat{
  background: #c7a492;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  text-decoration: none;
}

/* タグ */
.my-meta-tag{
  font-size: 12px;
  color: #777;
  text-decoration: none;
}

/* アイキャッチ */
.my-meta-eyecatch{
  margin-top: 12px;
}
.my-meta-eyecatch img{
  width: 100%;
  height: auto;
  display: block;
}

/* 記事内に自動表示されるCocoon標準のカテゴリを非表示 */
.single .entry-categories,
.single .entry-categories-tags,
.single .entry-categories-tags.ctdt-one-row {
  display: none !important;
}

/* 記事タイトル */
.my-post-title {
  font-size: 26px;      /* お好みで 24〜30px */
  font-weight: 500;
  line-height: 1.6;
  display: block;
  margin-bottom: 6px;
}

/* 時計アイコンと日付の色 */
.my-meta-date i.fa-clock {
  color: #BBA492;
}
.my-meta-date {
  color: #666;
}

/*==========================
/*カラムデザイン*
===========================*/

/* カラム上余白削除 */
.wp-block-columns {
  margin-top: 0 !important;
}



/*==========================
/*TOPページの新着情報リスト*
===========================*/

/* お知らせ全体 */
.new-entry-cards {
    margin-top: 20px;
    margin-bottom: 0px;
}

body.home .new-entry-cards {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* カード並び */
/* Swiperを正常動作に戻す */
body.home .new-entry-cards .swiper-wrapper {
    display: flex !important;
    justify-content: flex-start !important;
}

/* お知らせスライダー：最新記事を左から表示しつつ、スライド機能を残す */
body.home .new-entry-cards {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    overflow: hidden;
    gap: 24px !important;
}

body.home .new-entry-cards .swiper-wrapper {
    display: flex !important;
    justify-content: flex-start !important;
    /* transform は指定しない */
}

body.home .new-entry-cards .swiper-slide {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* 左端見切れ防止 */
body.home .new-entry-cards {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 右端の記事が見切れないようにする */
body.home .new-entry-cards .swiper-wrapper::after {
    content: "";
    display: block;
    flex: 0 0 24px;
}


/* カード余白 */
body.home .new-entry-cards .swiper-slide {
    margin-right: 0 !important;
}

/* 最後だけ余白なし */
.new-entry-cards .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* カードデザイン */
.new-entry-card {
    transition: all 0.3s ease;
}

/* hover */
.new-entry-card:hover {
    transform: translateY(-4px);
    opacity: 0.92;
}

/* 画像 */
.new-entry-card img {
    border-radius: 6px;
}

/* タイトル */
.new-entry-card-title {
    margin-top: 10px;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* 日付 */
.post-date {
    opacity: 0.6;
    font-size: 13px;
}


/*TOPページ mainの余白上下削除*/
/* TOPページだけ main の上下余白を消す */
body.home main.main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* TOPページ全体の余白除去 */
body.home #content,
body.home .content-in,
body.home .content.cf,
body.home main.main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.home .has-text-align-center {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}



/* 内部背景を透明化 */
.header-container,
.header-container-in,
.header-in,
.navi,
.navi-in {
    background: transparent !important;
}

/* ヘッダーとメニューの境界線を消す */
#header,
#navi {
    border: none !important;
    box-shadow: none !important;
}

/* TOPヘッダー：背景を横幅いっぱいに */
body.home #header-container {
    background: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 中身は通常の幅に戻す */
body.home #header,
body.home #navi,
body.home .header-in,
body.home .navi-in {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: transparent !important;
}

/* メニューを横並び中央に戻す */
body.home .navi-in > ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

/* 余計な白背景を消す */
body.home .header-container,
body.home .header-container-in,
body.home .navi,
body.home .navi-in,
body.home .header-in {
    background: transparent !important;
}

/* 上品な hover */
.navi-in a {
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.navi-in a:hover {
    background: transparent !important;
    color: #b89b7a !important;
    border-bottom: 1px solid #b89b7a;
}

/* hover時の白背景を消す */
.navi-in a:hover {
    background: transparent !important;
    color: #b89b7a !important;
    transition: 0.3s;
}






/*============================
** フッター
=============================*/

.footer-bottom {
  margin-top: 0px !important;
  font-size: 11px !important;
}

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

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

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