@charset "UTF-8";

/*
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@font-face {
  font-family: "reisyo";
  src: url("/fonts/gokubuto_reisyo.woff") format('woff');
  display: swap;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("/fonts/NotoSerifJP-Regular_sub.woff2") format('woff2');
  font-weight: normal;
  display: swap;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("/fonts/NotoSerifJP-Bold_sub.woff2") format('woff2');
  font-weight: bold;
  display: swap;
}

* {
  letter-spacing: 0.1em;
  line-height: 1.375em;
}

a {text-decoration: none;}
p {margin: 0;}
p + p {margin-top: 1em;}
.mb {
  display: block;
  margin-top: 1em;
}

ul, ol {
  padding-left: 1em;
}

/*明朝*/
main h1, main h2, main h3, #navi, .mincho {
  font-family: 'Noto Serif JP', '游ゴシック体', 'Yu Gothic', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
  letter-spacing: 0.05em;
}

/*全体表示をふわっとさせる INFO TOPのみ*/
body.home #container {
  opacity: 0.01;
  transition: all linear 1s;
}

body.home #container.on {
  opacity: 1;
}

/*コンテンツ部分*/
.content {padding: 0 1rem;}

/*TOPページコンテンツ部分*/
.home .content { padding: 0; }

.main {padding: 3.75% !important;}

/*ロゴ 文字 */
#header *, .footer .logo-text { font-family: 'reisyo', "Noto Sans JP", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif !important;}

/*ヘッダーフッター共通*/
#header-in, .footer-bottom .logo-footer a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

/*真言宗豊山派*/
#header .tagline,
footer .site-name-sub {
  display: block;
  margin: 0;
  line-height: 1em;
  font-size: 1.1rem;
  letter-spacing: 0;
}

/*ローマ字 Hojuji*/
#header .site-name-text::after,
footer .site-name-text::after {
  content: 'Hojuji';
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1em;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

/*サイト名(ロゴ)*/
#header .site-name-text {
  font-size: 4rem;
  letter-spacing: 0.5px;
  line-height: normal;
}

footer .site-name-text {
  font-size: 3rem;
  letter-spacing: 0.5px;
  line-height: normal;
}

/*** ヘッダー ***/
.header-container {  background-color: rgba(0,0,0,0); }
#header {padding: 24px 0;}
#header .logo-header {
	padding: 0;
	display: flex;
}
#header-in > img {
  width: 3.25rem;
  margin-right: 5px;
}

/*ヘッダーナビ*/
#menu_cb, #menu_btn {display: none; }
#navi .navi-in a:hover { background-color: #666; }
.navi-in > ul li:nth-last-of-type(1) {display: none;}
.navi-in > ul li { width: calc(100% / 7);}

.cl-slim #navi-in > ul li * { height: 100%; }

.cl-slim #navi-in > ul li a .item-label {
  line-height: 1em;
  font-size: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navi-in a, .navi-in a:hover { transition:none !important; }
#navi .navi-in a:hover { background-color: #666 !important; }
.navi-in > .menu-header {flex-wrap: nowrap;}

/*** フッター ***/
/*コンテンツ高さがブラウザ高さに満たない場合、フッターを最下部に固定する*/
#footer {
  position: static;
  width: 100%;
}

#footer.pos-fix {
  position: fixed;
  left: 0;
  bottom: 0;
}

footer a {text-decoration: none;}
.footer {padding: 0;}
.footer-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem;  
}

.footer-bottom .logo-footer a > img { width: 2.5rem; }

/*フロート解除*/
.footer-bottom-logo, .footer-bottom-content {
  float: none;
  position: static;
}

.footer-bottom .logo-footer {
  padding: 0;
  width: 25%;
}

/*フッターアドレス*/
.footer-address {
  width: 40%;
  padding: 0 1rem;
  font-size: .9rem;
  text-align: center;
}

#footer_zipcode {display: block;}

#footer_tel {/*電話番号*/
  font-weight: bold;
  font-size: 1.25rem;
}

#footer_tel::before {
  content: "\f095";
  display: inline-block;
  margin-right: 0.5rem;
  font-family: "fontAwesome";
  background: #fff;
  color: #897f4e;
  padding: 0 4px;
  border-radius: 5px;
}

/*フッターメニュー*/
#navi-footer { width:35% ;}

#navi-footer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

/*フッターメニュー項目3カラム*/
#navi-footer ul li {
  width: 50%;
  text-align: left;
  padding-right: 1rem;
  border: 0;
}

#navi-footer ul li a {padding: 0.25rem 0;}
#navi-footer ul li a::before {
  content: '\f0da';
  font-family: 'fontAwesome';
  letter-spacing: 0.25em;
}

.navi-footer-in a:hover  {
  background-color: rgba(0,0,0,0);
  text-decoration: underline;
}

#navi-footer ul li:last-child {border-right: 0;}

footer small {
  display: block;
  text-align: center;
  margin: 0 !important;
}

.copyright {background-color: #665c3a;}
#powered {background-color: #000;}
#powered a {color: #666;}

/*** サイドバー ***/
#sidebar { padding: 1rem; }
#sidebar h3 { margin-top: 0; }


/*** 投稿一覧 ***/
/*一覧スタイル*/
.a-wrap:hover, .widget_categories ul li a:hover {
  background-color: rgba(137, 127, 78, 0.25);
}
.list.ect-entry-card > a > article {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.list.ect-entry-card > a > article .entry-card-thumb {
  width: 240px;
  height: calc(240px * 2 / 3);
  margin: 0;
  float: none;
}

.list.ect-entry-card > a > article .entry-card-content {
  margin-left: 0;
  padding-left: 1em;
  width: calc(100% - 240px);
}

.entry-card-meta, .related-entry-card-meta {
  position: static;
}

/*コンテンツボックス*/
article.post {
  padding-bottom: 2rem;
}


/*タイトル*/
h2.entry-card-title {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif !important;
}

/*日付*/
.entry-card-info > * , .entry-card-snippet, .related-entry-card-snippet { font-size: 0.875em; }


/*カテゴリラベル*/
.cat-label-17 { background-color: rgb(180 40 140 / 70%); } /*保寿寺の四季*/
.cat-label-15 { background-color: rgb(40 165 45 / 75%); } /*仏道さんぽみち*/
.cat-label-4 { background-color: rgb(228 64 64 / 75%); }  /*イベント報告*/
.cat-label-3 { background-color: rgb(64 91 228 / 75%); }  /*お知らせ*/

/*タイトル*/
.article-header h1, .entry-header h1 {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif !important;
  margin-bottom: 0;
}

/*記事内 カテゴリラベル*/
.cat-link {font-size: 0.875em; }
.cat-link-17 { background-color: rgb(180 40 140 / 70%); }
.cat-link-15 { background-color: rgb(45 165 45 / 75%); }
.cat-link-4 { background-color: rgb(228 64 64 / 75%); } 
.cat-link-3 { background-color: rgb(64 91 228 / 75%); }


/*次(前) の投稿矢印*/
.pager-post-navi a .iconfont { color: #666; }

.entry-category, .post-date, .post-update, .post-author, .amp-back { font-size: 0.875em; }
.pager-post-navi a { font-size: 0.875em; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1256px以下*/
@media screen and (max-width: 1256px) {
  #navi-footer ul li {
    width: 50%;
    padding-right: 0.625rem;
    margin: 0;
  }
}

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

  /*ヘッダー ナビ*/
  .navi-in > ul li {
    flex-grow: 1;
    width: auto;
  }

  /*サイドバー 2カラム*/
  body:not(.page) #sidebar {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .widget {margin : 0;}
  #sidebar > aside { width: calc(50% - 0.5rem); }
  #sidebar > aside:first-child { margin-right: 1rem; }
}

/*959px以下*/
@media screen and (max-width: 959px) {
 .cl-slim #navi-in > ul li a .item-label { font-size: 0.8rem; }

 .footer-bottom .logo-footer a > img { width: 1.875rem; }
  footer .site-name-text { font-size: 2.5rem; }
  .footer-bottom .logo-footer { width: 30%; }
  .footer-address {
    width: 35%;
    padding: 0 .625rem;
  }
  .navi-footer-in a { font-size: 0.75rem; }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .navi-in > .menu-header {display: flex; }
}

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

  main.main { margin: 1rem 0; }
  
  /*ヘッダー*/
  #header {padding: 1rem 0;}

}

/*640px以下*/
@media screen and (max-width: 640px){

  /*ヘッダーメニュー (モバイル用メニューに変わる)*/
  #header-container-in {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
  }

  .navi-in > .menu-header {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  #menu_area {
    z-index: 99;
    width: 100%;
    height: 4rem;
    background-color: #000;
  }

  #menu_btn {
      position: relative;
      display: block;
      width: 4rem;
      height: 4rem;
      margin-left: auto;
      margin-right: 0;
      padding: 0.75rem;
  }

  #menu_cb ~ #menu_btn #show_btn { display: block; }
  #menu_cb ~ #menu_btn #hide_btn { display: none; }
  #menu_cb:checked ~ #menu_btn #show_btn { display: none; }
  #menu_cb:checked ~ #menu_btn #hide_btn { display: block; }

  #header-container .navi {
    height: 0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;
    transition: height 0.5s;
  }

  #menu_cb:checked ~ .navi {
    height: calc(4rem * 8);
  }

  .cl-slim #navi-in > ul li a {
    font-size: 1.1rem;
    display: flex;
    width: 100%;
    height: 4rem;
    align-items: center;
    justify-content: center;
    border-bottom: dotted 1px #fff;
    font-weight: normal;
  }

  .cl-slim #navi-in > ul li a::after {
      content: "\f054";
      position: absolute;
      right: 1em;
      top: calc(50% - 0.75rem);
      font-family: "fontAwesome";
      font-size: 1.1rem;
  }

  .cl-slim .navi-in > ul li {
    height: auto;
    line-height: normal;
  }
  .cl-slim #navi-in > ul li a .item-label { font-size: 1.1rem; }
  .navi-in > ul li:nth-last-of-type(1) {display: block;}

  .page_title .elementor-column:nth-of-type(1) { height: 90px; }
  .page_title .elementor-column:nth-of-type(2) {
    height: calc(250px - 16px - 90px);
    align-items: flex-start;
  }

  /*フッター*/
  .footer-bottom { flex-direction: column; }
  .footer-bottom .logo-footer a > img {
    width: 2.5rem;
    margin-right: 5px;
  }
  
  footer .site-name-text { font-size: 3.125rem; }
  .footer-bottom .logo-footer { margin-bottom: 1rem; }
  .footer-bottom .logo-footer, 
  .footer-address  {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  #footer_zipcode {
    display: inline-block;
    padding-right: 1em;
  }
  #navi-footer {display: none; }
}


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

  /*共通*/
  .main { padding: 5% !important; }

  /*コンテンツ部分*/
  .content { padding: 0; }
  
  /*** 投稿一覧 ***/
  /*一覧スタイル*/
  .list.ect-entry-card > a > article {
    flex-direction: column;
    border: solid 1px #ddd;
    padding: 3%;
  }

  .list.ect-entry-card > a > article .entry-card-thumb {
    width: 50vw;
    max-width: 200px;
    height: calc(50vw * 2 / 3);
    max-height: calc(200px * 2 / 3);
    margin-bottom: 0.5em;
  }

  .list.ect-entry-card > a > article .entry-card-content {
    width: 100%;
    padding: 0;
  }

  /*** 投稿ページ ***/
  /*タイトル*/
  .article-header h1, .entry-header h1 { padding: 0; }

  /*サイドバー 1カラム*/
  body:not(.page) #sidebar { display: block; }

  #sidebar > aside { width: 100%; }
  #sidebar > aside:first-child { margin: 0 0 1rem 0; }
}