/* 基本構成 */
html {
  height: 100%;
  width: 100%;
}

body {
  /* font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
  font-family: "Sawarabi Mincho";
  color: #231815;
  height: 100%;
}

header, section, footer {
  width: 100%;
}

.container {
  width: 90%;
  max-width: 80%;
  min-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* 背景画像 */

body#second_page {
  background: url(./images/secd_bk_001-100.jpg) top 0 right -30px no-repeat fixed;
}

/* レイアウト用 */
.flex { display: flex; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* デフォルトカラー */

.gold { background: #c8af81; }
.red { background: #C1272D; }
.light {background: #f2f1e9;}
.white { background: #fff; }
.glay {background: #535350;}
.black { background: #231815; }

.gold_text { color: #c8af81; }
.red_text { color: #C1272D; }

.samle-1 { background:gainsboro; }
.samle-2 { background:lightgrey; }
.samle-3 { background:silver; }
.samle-4 { background:darkgray; }
.samle-5 { background:gray; }
.samle-6 { background:dimgray; }

/* アニメーション */

.fade-in {
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
}

.upIn {
  animation: upIn 2s ease forwards;
}
@keyframes upIn {
  0% { transform:translate(0,5px); opacity: 0; }
  100% { transform:translate(0,0); opacity: 1; }
}

.timelag_01 {
  animation: downIn 2s ease forwards;
}
.timelag_02 {
  animation: downIn 3s ease forwards;
}
.timelag_03 {
  animation: downIn 3s ease forwards;
}

@keyframes downIn {
  0% { transform:translate(0,-5px); opacity: 0.5; }
  100% { transform:translate(0,0); opacity: 1; }
}

/* リンク */

a { text-decoration: none; color: #323232; transition: linear .3s; }
a:hover { opacity: .7;}
h1 a:hover { opacity: 1;}

/* ヘッダー */

body#top_page header {
  border-bottom: #c8af81 1px solid;
}

header .top_image {
  height: 92vh;
}

header div.side:nth-child(1) {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36vw;
}

header div.side:nth-child(1) div:nth-child(1) img {
  height: 24vh;
  max-height: 217px;
  width: auto;
}

header div.side:nth-child(1) div:nth-child(2) img {
  height: 34vh;
  max-height: 238px;
  width: auto;
}

header div.side:nth-child(1) div:nth-child(3) img {
  height: 15vh;
  max-height: 138px;
  width: auto;
}

header div.side:nth-child(1) div:nth-child(2) img {
  padding-top: 2rem;
  padding-bottom: 4rem;;
}

header div.side:nth-child(2) {
  background-image: url(./images/tp_image_006.jpg);
  background-size: cover;
  background-position: center center;
  width: 64vw;
}

/* セカンドページヘッダー */

body#second_page header {
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: #c8af81 1px solid;
  z-index: 40;
}

body#second_page .navigation .logo {
  height: 100%;
  padding-right: 2vh;
}

body#second_page .navigation img {
  width: auto;
  height: 8vh;
  vertical-align: bottom;
}

/* ナビゲーション */

body#top_page nav div.logo {
  display: none;
}

header  nav ul {
  width: 100%;
  height: 8vh;
  justify-content: space-around;
  align-items: center;
}

header  nav ul li {
  font-size: calc(.8rem + 0.3vw);
  padding-left: 2vw;
  letter-spacing: .1rem;
}

header  nav ul li:first-child {
  padding-left: 0;
}

header nav ul li a {
  color: #231815;
}

body#top_page header nav {
    border-top: #c8af81 1px solid;
    background: #fff;
}

body#second_page section:nth-of-type(1) {
  margin-top: 80px;
}

/* モバイルメニュー */

#cover {
  background: #000;
  opacity: .8;
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  z-index: 10;
  display: none;
}

.menu_btn {
  display: none;
}

body.menu-open #cover {
  display: block;
}

#menu {
  display: none;
  z-index: 10;
  position: fixed;
  top: 0;
  right: -500px;
  color: #231815;
  background: #c8af81;
  padding: 8px;
  padding-top: 120px;
  height: 100%;
  width: 80%;
  min-height: 100%;
  transition: .4s;
}

#menu ul {
  margin-left: 20px;
  font-size: 1.4rem;
  flex-direction: column;
}

#menu ul li {
  padding-bottom: 40px;
  padding-left: 20px;
}

body.menu-open #menu {
  display: block;
  right: 0;
}

.menu_btn {
  z-index: 30;
  top: 10px;
  right: 10px;
}

#show, #hide {
  cursor: pointer;
  color: gray;
  width: 60px;
  height: 60px;
  text-align: center;
  padding: 5px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  opacity: .8;
  font-size: 50px;
}

#hide {
  display: none;
}

body.menu-open #show {
  display: none;
}

body.menu-open #hide {
  display: inherit;
}


/* お知らせ */

body#top_page .notice {
  position: absolute;
  bottom: 10vh;
  right: 1rem;
  border-radius: 2px;
}

header div.notice .notice_title {
  padding: .4rem;
  text-align: center;
}

header div.notice .notice_frame iframe {
  width: 300px;
  height: 200px;
}

/* 臨時追加 */

body#top_page .new_box {
  position: absolute;
  bottom: 10vh;
  right: 340px;
  border-radius: 2px;
  height: auto;
  background-color: #fff;
  border: 1px solid #323232;
}

body#top_page .new_box .box h2 {
  background: #C1272D;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 2;
  padding-top: 0.2rem;
}

body#top_page .new_box .box {
  padding: 0.3rem;
  text-align: center;
  line-height: 1.3;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
  align-items: center;
}

body#top_page .new_box .box .inner_box .price {
  border-bottom: 2px solid #C1272D;
  text-align: center;
  font-size: 1.4rem;
  width: 80%;
  color: #C1272D;
  margin: 0 auto;
  font-weight: bold;
}

body#top_page .new_box .box .inner_box .text {
  padding: 1rem;
}

body#top_page .new_box .box .inner_box:nth-child(2) {
  background-color: #f2f1e9;
  border: 1px solid #896B3F;
  padding: 1rem;
  white-space: nowrap;
  height: auto;
  line-height: 1.8;
  display: grid;
  place-items: center;
}

body#top_page .new_box .box:nth-child(3) {
  text-align: left;
  font-size: 0.8rem;
}




/* フッター */

footer {
  margin-top: 6vh;
}

footer nav {
  background: #c8af81;
  width: 100%;
}

footer nav ul {
  height: 60px;
  justify-content: center;
  align-items: center;
}

footer nav ul li {
  font-size: calc(.8rem + 0.3vw);
  padding-left: 2vw;
}

footer nav ul li:first-child {
  padding-left: 0;
}

footer nav ul li a {
  color: #fff;
  letter-spacing: .2rem;
}

footer .information {
  justify-content: flex-start;
  align-items: center;
  font-size: 0.9rem;
}

footer .information .box {
  padding-left: 3vw;
}

footer .information .box:first-child {
  padding-left: 0;
}

footer .information .box:first-child img {
  vertical-align: bottom;
  width: 300px;
}

footer .information .box:nth-child(n + 2) {
  text-align: left;
  line-height: 1.6;
}

footer .information .box:last-child {
  text-align: center;
  line-height: 1.2;
  font-size: 0.7rem;
}

footer .copyrights {
  position: absolute;
  right: 10px;
  bottom: 5px;
  z-index: 1000;
  font-size: .7rem;
}

/* おすすめコンテンツ1 */

section.features {
  margin-top: 4vh;
}

section.features .container:nth-child(1) .box {
  justify-content: space-between;
  /* width: calc(50 / 2); */
  width: 50%;
}

section.features .container:nth-child(1) .box:nth-child(1) {
  margin-right: 1vh;
}

section.features .container:nth-child(1) .box:nth-child(2) {
  margin-left: 1vh;
}

section.features .container .btn {
  height: 8vh;
  width: 100%;
  font-size: 1.2rem;
  letter-spacing: .3rem;
  justify-content: center;
  align-items: center;
  border: #c8af81 1px solid;
  background-image:
  url(./images/md_bk_cr1.png),
  url(./images/md_bk_cr2.png),
  url(./images/md_bk_cr3.png),
  url(./images/md_bk_cr4.png),
  url(./images/md_bk_gr_02.jpg);
  background-repeat:
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  repeat-x;
  background-position:
  left 5px top 5px,
  right 5px top 5px,
  right 5px bottom 5px,
  left 5px bottom 5px,
  center center;
  margin-bottom: 2px;
}

section.features .container .photo {
  width: 100%;
  height: 40vh;
  overflow: hidden;
  background: #000;
}

section.features .photo img {
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  height: 20vh;
  object-fit: cover;
  transition: 1s;
}

section.features a:hover img {
transform: scale(1.01);
opacity: .9;
}

/* おすすめコンテンツ2 */

section.features .container:nth-child(2) {
  margin-top: 2vh;
  justify-content: center;
  margin-bottom: 4vh;
}

section.features .container:nth-child(2) .box {
  width : calc(100 / 3);
}

section.features .container:nth-child(2) .box a {
  flex-direction: column;
}

section.features .container:nth-child(2) .box:nth-child(1) {
  margin-right: 1vh;
}

section.features .container:nth-child(2) .box:nth-child(2) {
  margin-left: 1vh;
  margin-right: 1vh;
}

section.features .container:nth-child(2) .box:nth-child(3) {
  margin-left: 1vh;
  margin-right: 0;
}

section.features .container:nth-child(2) .photo {
  height: 30vh;
}

section.features .container:nth-child(2) .photo img {
  height: 20vh
  min-width: 50%;
}

/* インフォメーションエリア */

section.info {
  margin-top: 2rem;
  border-top: #c8af81 1px solid;
  border-bottom: #c8af81 1px solid;
}

section.info .container {
  justify-content: center;
  flex-direction: row;
  height: 100%;
}

section.info .container .box {
  width: 300px;
  margin-right: calc(2rem + 0.6vw);
  text-align: left;
}

section.info .container .box img {
  width: calc(1000px / 3 - 4vw);
  max-width: 376px;
}

section.info .container .parking_box {
  width: 300px;
  align-self: center;
  text-align: left;
  margin-right: calc(2rem + 0.6vw);
  /* margin-right: 2vw; */
}

section.info .container .parking_box div:nth-child(1) {
  width: 300px;
  background: #fff;
  text-align: center;
}

section.info .container .parking_box img {
  max-height: 200px;
  width: auto;
  object-fit: cover;
}

section.info .container .parking_box p {
  font-size: .7rem;
  line-height: 1.2;
  padding-top: .6rem;
}

section.info .container .map_box {
  width: 300px;
  height: 280px;
  align-self: center;
  justify-content: center;
  align-items: center;
}

section.info .container .box p {
  text-align: left;
  line-height: 1.4;
  padding-top: 10px;
  padding-bottom: 20px;
}


/* 催事バナー */

section.banner {
  margin-top: 4rem;
}

section.banner img {
  width: 100%;
  height: auto;
}

/* リンクエリア */

section.link {
  margin-top: 4rem;
}

section.link .container {
  justify-content: center;
}

section.link .container .box {
  width: 40%;
  padding: 2rem;
  letter-spacing: .2rem;
  font-size: 1.2rem;
  font-weight: normal;
  background: #f2f1e9;
  border: #896B3F 2px solid;
  border-radius: 16px;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}

section.link .container .box:nth-child(1) {
  margin-right: 40px;
}

section.link .container .box a {
  color: #896B3F;
}

/* セカンドページ共通 */

body#second_page h1 {
  font-size: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  letter-spacing: .5rem;
  font-weight: normal;
}

section.content_border .wrap {
  background: #f2f1e9;
  padding: 2vw;
}

section.content_border .box {
  background: #fff;
  padding: 2vw;
  width: 100%;
  background-image:
  url(./images/md_bk_cr1.png),
  url(./images/md_bk_cr2.png),
  url(./images/md_bk_cr3.png),
  url(./images/md_bk_cr4.png);
  background-repeat:
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat;
  background-position:
  left 5px top 5px,
  right 5px top 5px,
  right 5px bottom 5px,
  left 5px bottom 5px;
}

section.content_border .inner_box p {
  text-align: left;
  line-height: 2;
  margin-bottom: 2rem;
  font-size: 1.4rem;
}

section.content_border .inner_box p:last-child {
  margin-bottom: 0;
}

/* 御神祭 */

section.gosaisin .wrap .box {
  justify-content: center;
  flex-wrap: nowrap;
}

section.gosaisin .wrap .box > div {
  width: 50%;
}

section.gosaisin .wrap .box > div:first-child {
  margin-right: 2rem;
}

section.gosaisin .wrap .inner_box:nth-child(1) {
  width: 50%;
}

section.gosaisin .wrap .inner_box:nth-child(1) img {
  width: 100%;
  object-fit: cover;
}

section.gosaisin .wrap .inner_box:nth-child(2) {
  width: 50%;
  padding: 2vw;
  background: #f2f1e9;
}

section.gosaisin .wrap .inner_box:nth-child(2) {
  flex-direction: column;
}

section.gosaisin .upper img {
  width: 100%;
  object-fit: cover;
}

section.gosaisin .lower {
  background: #fff;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 3;
}

section.gosaisin .lower span {
  font-size: 2vw;
}

/* 御由緒 */

section.goyuisyo .inner_box:first-child {
  margin-right: 2vw;
  width: 60%;
}

section.goyuisyo .photoBox {
  width: 100%;
  text-align: left;
  margin-bottom: 2rem;
}

section.goyuisyo .photoBox img {
  width: 100%;
  object-fit: cover;
}

section.goyuisyo .photoBox div {
  padding-top: .8rem;
}

/* 御神徳 */



/* 御遺訓 */

section.goikun .inner_box p {
  text-align: center;
  width: 100%;
}

section.goikun .box {
  justify-content: center;
  align-items: center;
}

section.goikun .inner_box {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section.goikun .inner_box img {
  width: 100%;
  object-fit: scale-down;
}

/* ご祈祷 */

section.gokitou .inner_box {
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

section.gokitou h2 {
  width: 50%;
  background: #c8af81;
  padding: 1rem;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 1rem;
  color: #fff;
}

section.gokitou ul {
  padding-top: 4rem;
}

section.gokitou ul li {
  display: inline-block;
  font-size: 1.2rem;
  padding-right: 2rem;
}

section.gokitou ul li:last-child {
  padding-right: 0;
}

section.gokitou .box .inner_box p {
  font-size: 1rem;
  padding-top: 2rem;
}

section.gokitou .box .inner_box img {
  width: 100%;
  height: auto;
  max-width: 80%
}

section.gokitou div.wrap {
  margin-bottom: 2rem;
}

/* 宝物 */

section.houbutu .box {
  justify-content: space-between;
  flex-wrap: wrap;
}

section.houbutu .box .inner_box {
  text-align: left;
  flex-direction: column;
  width: 46%;
  margin-bottom: 6rem;
}

section.houbutu .box .inner_box h2 {
  font-size: 1.6rem;
  font-weight: normal;
  border-bottom: #c8af81 2px solid;
  padding-bottom: .5rem;
}

section.houbutu .box .inner_box h3 {
  font-size: .8rem;
  padding-top: .5rem;
  font-weight: normal;
  letter-spacing: .3rem;
}

section.houbutu .box .inner_box p {
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  padding-top: 1rem;
  height: 4rem;
}

section.houbutu .box .inner_box p:nth-of-type(n + 2) {
  font-size: .8;
  padding-top: 0;
  font-weight: normal;
  height: 1rem;
  font-family: sans-serif;
}

section.houbutu .box .inner_box div.photoBox {
}

section.houbutu .box .inner_box .photoBox img {
  width: 100%;
  object-fit: cover;
}

/* 年中行事 */

section.gyouji .box {
  justify-content: space-between;
  flex-wrap: wrap;
}

section.gyouji .box .inner_box {
  width: 30%;
  flex-direction: column;
  padding: .6rem;
  margin-bottom: 3rem;
  background: #f2f1e9;
  border: #c8af81 1px solid;
  margin-right: 1rem;
}

section.gyouji .box .inner_box:nth-child(3n + 0) {
    margin-right: 0;
}

section.gyouji .box .blank {
  visibility: hidden;
}

section.gyouji .box .inner_box .text_box {
  width: 100%;
  height: 100%;
  background: #fff;
}


section.gyouji .box .inner_box .photoBox {
  width: 100%;
  height: 100%;
  background: #fff;
}

section.gyouji .box .inner_box .photoBox img {
  width: 100%;
  height: 100%;
  padding: 1rem;
  object-fit: cover;
}

section.gyouji .box .inner_box .text_box .upper {
  height: 50%;
  justify-content: center;
  align-items: center;
  border-bottom: #f2f1e9 2px solid;
  color: #C1272D;
}

section.gyouji .box .inner_box .text_box .upper h2 {
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: .1rem;
  padding: 2rem;

}

section.gyouji .box .inner_box .text_box .lower {
  height: 50%;
  justify-content: center;
  align-items: center;
}

section.gyouji .box .inner_box .text_box .lower h3 {
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: .1rem;
}
