@charset "utf-8";

@import url(reset.css) screen and (min-width: 780px);

/************************************
** 共通
************************************/
@media screen and (min-width: 780px) {
  .pc_display {
    display: block;
  }
  .sp_display {
    display: none;
  }
}
@media screen and (max-width: 779px) {
  .pc_display {
    display: none;
  }
  .sp_display {
    display: block;
  }
}
.font-serif {
  font-family: "HG明朝E", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.title_icon img {
  display: inline;
  width: 40px;
  height: 40px;
}
.youtube_area {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.youtube_movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/************************************
** ブロックエディタ調整
************************************/
.wp-block-image figcaption {
  text-align: center;
}
.column-gap {
  grid-gap: 3px;
}
/************************************
** レスポンシブページネーション
************************************/
.pagination {
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}

.pagination,
.pagination li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
  min-width: 36px;
  min-height: 36px;
  color: #333;
}

.pagination li:not([class*="current"]) a:hover {
  background-color: #eee;
}

.pagination li:first-of-type a {
  border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.pagination li.first a::before {
  content: "\f100";
}
.pagination li.last a::after {
  content: "\f101";
}

.pagination li.previous a::before {
  content: "\f104";
}
.pagination li.next a::after {
  content: "\f105";
}

.pagination li.current a {
  background-color: #ddd;
  cursor: default;
  pointer-events: none;
}

.pagination > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

@media only screen and (max-width: 680px) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a {
    border-left-width: 1px;
  }
}

@media only screen and (max-width: 500px) {
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next {
    position: initial;
    top: initial;
    left: initial;
  }

  .pagination li.previous a {
    border-left-width: 0;
  }
}

@media only screen and (max-width: 400px) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a {
    border-left-width: 1px;
  }
}

@media only screen and (max-width: 240px) {
  /* For watches? */
  .pagination li {
    width: 50%;
  }

  .pagination li.current {
    order: 2;
    width: 100%;
    border-left-width: 1px;
  }
}

/************************************
** ソーシャルボタン
************************************/
.SnsFacebook {
  display: inline;
  margin: 0 0 0 20px;
  padding: 0;
}

.SnsFacebook_footer {
  margin: 0 0 10px;
  padding: 0;
}

/************************************
** 新着情報　記事「秋季大祭行事のご案内」用
************************************/
#autumn-rite-h28 {
}

#autumn-rite-h28 h4 {
  text-align: center;
  font-size: 18px;
}

#autumn-rite-h28 table {
  width: 100%;
  margin: 0 0 20px;
}
#autumn-rite-h28 table::last-child {
  margin: 0 0 0;
}

#autumn-rite-h28 table td {
  padding: 6px 10px;
  border: 1px solid #ccc;
}

#autumn-rite-h28 table .day {
  width: 90px;
}

#autumn-rite-h28 table .time {
  width: 40px;
}

#autumn-rite-h28 table .title {
  width: 100px;
}

#autumn-rite-h28 table .team {
}

#autumn-rite {
}

#autumn-rite h4 {
  text-align: center;
  font-size: 18px;
}

#autumn-rite table {
  width: 100%;
  margin: 0 0 20px;
}
#autumn-rite table::last-child {
  margin: 0 0 0;
}

#autumn-rite table td {
  padding: 6px 10px;
  border: 1px solid #ccc;
}

#autumn-rite table .day {
  width: 90px;
}

#autumn-rite table .time {
  width: 40px;
}

#autumn-rite table .title {
  width: 140px;
}

#autumn-rite table .team {
}
.enmoku {
  border: 1px dotted #271545;
}

/************************************
** 新着情報　記事「生田神社大海夏祭」用 H30
************************************/
.guest_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.guest_list li {
  width: 50%;
  padding: 10px 0;
  box-sizing: border-box;
  text-align: center;
}
@media only screen and (max-width: 39.9rem) {
  .guest_list li {
    width: 100%;
  }
}

/************************************
** 新着情報　共通
************************************/
#post_data {
}
.post_title {
  padding: 10px 20px;
  background: #271545;
  border-bottom: 1px solid #ffffff;
  text-align: center;
  color: #ffffff;
}
.post_sub_title {
  padding: 5px 10px;
  border-left: 5px solid #271545;
  font-weight: bold;
}
.post_sub_title2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 20px;
  font-family: "HG明朝E", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.post_col2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.post_col2 > * {
  width: calc(50% - 1rem);
}
@media only screen and (max-width: 39.9rem) {
  .post_col2 > * {
    width: 100%;
  }
}
#post_data table {
  width: 100%;
}
#post_data table th {
  padding: 10px 20px;
  background: #271545;
  border: 1px solid #271545;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}
#post_data table tr:last-child th {
  border-bottom: 1px solid #271545;
}
#post_data table td {
  padding: 10px 20px;
  border: 1px solid #271545;
}

@media only screen and (max-width: 39.9rem) {
  #post_data table th {
    display: block;
    width: 100%;
  }
  #post_data table td {
    display: block;
    width: 100%;
    vertical-align: middle;
  }
}

.link_button a:link,
.link_button a:visited {
  display: block;
  width: 100%;
  margin: 0 auto 20px;
  padding: 10px 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #271545), color-stop(0, #6940ae));
  background: -webkit-linear-gradient(#6940ae, #271545);
  background: -moz-linear-gradient(#6940ae, #271545);
  background: -o-linear-gradient(#6940ae, #271545);
  background: -ms-linear-gradient(#6940ae, #271545);
  background: linear-gradient(#6940ae, #271545);
  border: 1px solid #fef7e5;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  transition: 0.3s;
}
.link_button a:hover {
  background: #ff6991;
  cursor: pointer;
}

.center_position {
  text-align: center;
}

/************************************
** 新着情報　記事「厄除け御祈祷」用
************************************/
.yaku th,
.yaku td {
  text-align: center;
}
#yakuyoke .table {
  width: 100%;
  margin: 0 0 10px;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

#yakuyoke .table th {
  width: 180px;
  padding: 10px 20px;
  font-weight: normal;
  background: #fff;
  font-size: 15px;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

#yakuyoke .table th.title {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #303030), color-stop(0, #606060));
  background: -webkit-linear-gradient(#606060, #303030);
  background: -moz-linear-gradient(#606060, #303030);
  background: -o-linear-gradient(#606060, #303030);
  background: -ms-linear-gradient(#606060, #303030);
  background: linear-gradient(#606060, #303030);
  color: #fff;
  font-family: "HG明朝E", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#yakuyoke .table td {
  width: 280px;
  padding: 10px 20px;
  background: #fff;
  font-size: 15px;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

/************************************
** 新着情報　記事「節分祭並びに豆撒き神事のご案内」用
************************************/

#setsubun-guest {
}
#setsubun-guest table {
  width: 100%;
}
#setsubun-guest table th {
  padding: 10px 20px;
  background: #271545;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}
#setsubun-guest table td {
  padding: 10px 20px;
  border-bottom: 1px dotted #271545;
}

@media only screen and (max-width: 39.9rem) {
  #setsubun-guest table th {
    display: block;
    width: 100%;
  }
  #setsubun-guest table td {
    display: block;
    width: 100%;
    vertical-align: middle;
  }
}

/************************************
** ページ　共通
************************************/
.mb4 {
  margin-bottom: 40px !important;
}
.w200 {
  width: 100%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.w300 {
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.w400 {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.w500 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.w600 {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.w700 {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.w800 {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.content {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.content table {
  width: 100%;
  background: #ffffff;
}
.content table th {
  padding: 10px 20px;
  background: #271545;
  border: 1px solid #271545;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}
.content table tr:last-child th {
  border-bottom: 1px solid #271545;
}
.content table td {
  padding: 10px 20px;
  border: 1px solid #271545;
}

@media only screen and (max-width: 39.9rem) {
  .content table th {
    display: block;
    width: 100%;
  }
  .content table td {
    display: block;
    width: 100%;
    vertical-align: middle;
  }
}
.title_box01 {
  width: 100%;
}
.title_box01 dt {
  padding: 0.5rem 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #6940ae), color-stop(0, #271545));
  background: -webkit-linear-gradient(#271545, #6940ae);
  background: -moz-linear-gradient(#271545, #6940ae);
  background: -o-linear-gradient(#271545, #6940ae);
  background: -ms-linear-gradient(#271545, #6940ae);
  background: linear-gradient(#271545, #6940ae);
  text-align: center;
  font-family: "HG明朝E", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #ffffff;
}
.title_box01 dd {
  padding: 1rem;
  background: #ffffff;
  border: 2px solid #6940ae;
}

/************************************
生田神社大海祭りページ
************************************/
#pageDaikai {
  width: 100%;
  background: url(img/page_daikai-2017.jpg) no-repeat fixed center;
  background-size: cover;
}
#daikai-fes {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
#daikai-fes .daikai-fes-cont {
  width: 100%;
  margin: 0 0 20px;
  background: #ffffff;
}
table.fes-time {
  width: 100%;
  max-width: 800px;
  margin: 20px auto 40px;
}

.attention-text {
  width: 100%;
  max-width: 800px;
  margin: 20px auto 40px;
}

table.fes-time thead {
}
table.fes-time thead th {
  color: #999999;
}
table.fes-time thead th.day-title {
  padding: 10px 0;
  font-size: 28px;
  color: #271545;
}
table.fes-time tbody {
}
table.fes-time tbody tr {
  border-top: 1px dashed #d5d5d5;
}
table.fes-time tbody tr:last-child {
  border-bottom: 1px dashed #d5d5d5;
}
table.fes-time tbody th {
  width: 180px;
  padding: 10px;
  background: #fde6e7;
}
table.fes-time tbody td {
  width: 580px;
  padding: 10px;
}
table.fes-time2 {
  width: 100%;
  max-width: 800px;
  margin: 20px auto 40px;
}

table.fes-time2 thead {
}
table.fes-time2 thead th {
  color: #999999;
}
table.fes-time2 thead th.day-title {
  padding: 10px 0;
  font-size: 28px;
  color: #271545;
}
table.fes-time2 tbody {
  border: 1px solid #bbbbbb;
}
table.fes-time2 tbody tr {
  border-top: 1px dashed #d5d5d5;
}
table.fes-time2 tbody th {
  width: 100px;
  padding: 5px;
  background: #fde6e7;
}
table.fes-time2 tbody td {
  padding: 5px;
}
table.fes-time2 tbody tr td:nth-of-type(1) {
  width: 100px;
  text-align: center;
}
table.fes-time2 tbody tr td:nth-of-type(2) {
  width: 280px;
  text-align: center;
}
ul.fes-img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
ul.fes-img li {
  width: 215px;
  margin: 0 0 20px;
  text-align: center;
  font-size: 12px;
}
#daikai-fes-announce {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#daikai-fes-announce1 {
  width: 100%;
  max-width: 470px;
  margin: 0 0 20px;
  background: #ffffff;
}
#daikai-fes-announce2 {
  width: 100%;
  max-width: 470px;
  margin: 0 0 20px;
  background: #ffffff;
}
#daikai-fes-announce3 {
  width: 100%;
  max-width: 960px;
  background: #ffffff;
}

table.daikai-fes-announce {
  width: 100%;
}
table.daikai-fes-announce th {
  padding: 10px 20px;
  background: #271545;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}
table.daikai-fes-announce td {
  padding: 10px 20px;
  border-bottom: 1px dotted #271545;
}

@media only screen and (max-width: 39.9rem) {
  table.daikai-fes-announce th {
    display: block;
    width: 100%;
  }
  table.daikai-fes-announce td {
    display: block;
    width: 100%;
    vertical-align: middle;
  }
}
@media only screen and (max-width: 39.9rem) {
  #pageDaikai {
    width: 100%;
    background: #ffffff;
  }

  ul.fes-img li {
    width: 46%;
  }
}
/************************************
生田祭ページ
************************************/
#pageIkutasai {
  width: 100%;
  background: url(img/page_ikutasai.jpg) no-repeat fixed top center;
  background-size: cover;
}

#ikutasai {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.sec-twilight {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.sec-twilight img:hover {
  opacity: 0.6;
}
/************************************
2021新年参拝情報
************************************/
#pageNewyear {
  width: 100%;
  background: url(img/page_newyear.jpg) no-repeat fixed -10% center;
  background-size: cover;
}

#pageNewyear-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  max-width: 760px;
  margin: 2em auto;
}
@media only screen and (max-width: 39.9rem) {
  #pageNewyear {
    width: 100%;
    background: none;
  }
  #pageNewyear-link {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    margin: 2em auto;
  }
}

/************************************
QRコードおみくじ
************************************/
#qromikuji-manual {
  padding: 80px 0;
  background: url(img/page_qromikuji.jpg) no-repeat top center / cover;
}

#qromikuji-ttl {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px;
  color: #fff;
  overflow: hidden;
  text-align: center;
  line-height: 30px;
}
@media only screen and (max-width: 39.9rem) {
  #qromikuji-ttl {
    width: 100%;
    margin: 0 auto;
    padding: 10px 5px;
    color: #fff;
    overflow: hidden;
    text-align: center;
    font-size: 18px;
  }
}

#qromikuji-ttl span {
  display: inline-block;
  padding: 0 20px;
  font-size: 24px;
  position: relative;
  font-family: "HG明朝E", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#qromikuji-ttl span:before,
#qromikuji-ttl span:after {
  border-top: 1px solid #ddd;
  content: "";
  position: absolute;
  top: 50%;
  width: 99em;
}

#qromikuji-ttl span:before {
  right: 100%;
}

#qromikuji-ttl span:after {
  left: 100%;
}

#qromikuji-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media only screen and (max-width: 39.9rem) {
  #qromikuji-list {
    flex-wrap: wrap;
  }
}
#qromikuji-list li {
  padding: 0;
  margin: 20px;
}
@media only screen and (max-width: 39.9rem) {
  #qromikuji-list li {
    width: 43%;
    margin: 10px;
    font-size: 14px;
  }
}
#qromikuji-list li .image {
  width: 100%;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#qromikuji-list li .number {
  color: #fff;
}

/************************************
七五三追記
************************************/
.sec-konzatsu {
  margin: 3em auto;
}
.sec-konzatsu .con-konzatsu dt {
  position: relative;
  width: 94%;
  max-width: 600px;
  vertical-align: middle;
  margin: 0 auto;
  padding: 0.8em 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #271545), color-stop(0, #6940ae));
  background: -webkit-linear-gradient(#6940ae, #271545);
  background: -moz-linear-gradient(#6940ae, #271545);
  background: -o-linear-gradient(#6940ae, #271545);
  background: -ms-linear-gradient(#6940ae, #271545);
  background: linear-gradient(#6940ae, #271545);
  border: 1px solid #fef7e5;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.5px;
  font-size: 1.5em;
}
.sec-konzatsu .con-konzatsu dd {
  width: 80%;
  margin: 0 auto;
  padding: 2em;
}

/************************************
contact form7
************************************/
form.sent table,
form.sent #pageContactButton {
  display: none;
}
div.wpcf7-mail-sent-ok {
  background-color: #56b379;
  color: #ffffff;
  font-weight: bold;
  font-size: 120%;
  padding: 10px;
}

.wpcf7-list-item-label {
  padding: 0 0.6em;
}
.wpcf7-field-group-add {
  width: 200px;
  margin: 10px;
  padding: 10px;
  color: #fff;
  border-radius: 4px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #271545), color-stop(0, #6940ae));
  background: -webkit-linear-gradient(#6940ae, #271545);
  background: -moz-linear-gradient(#6940ae, #271545);
  background: -o-linear-gradient(#6940ae, #271545);
  background: -ms-linear-gradient(#6940ae, #271545);
  background: linear-gradient(#6940ae, #271545);
  cursor: pointer;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
  -webkit-appearance: none;
}

/************************************
会館アナウンス
************************************/
.hall_announce {
  max-width: 600px;
  margin: 3em auto auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #a78661;
}
.hall_announce_ttl {
  font-size: 1.2em;
  font-weight: 700;
}
@media (max-width: 779px) {
  .top_banner {
    width: 240px;
    margin: auto;
    padding: 10px;
    background: #eeeeee;
  }
}
@media (min-width: 780px) {
  .top_banner {
    position: absolute;
    right: 20px;
    bottom: 240px;
    width: 200px;
    aspect-ratio: 1 / 1;
  }
}