@charset "utf-8";

/* 基本font-sizeを10pxに固定 */
html {font-size: 62.5% }
html { scroll-behavior: smooth;}

/* ↓↓↓ reset css ↓↓↓ {*/
*, *::before, *::after {
  margin:0;
  padding:0;
  border:0;
  box-sizing:border-box;
}
img, iframe {
  display:block;
  width: 100%;
}
ul {
  list-style:none;
}
address{
  font-style:normal;
}
a {
  color:inherit;
  text-decoration:none;
}
h1,h2,h3,h4,h5 { 
  font:inherit;
}
input, button, textarea, select {
  background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  appearance: none;
  font-family:inherit;
}
th, td {
  font-weight:normal;
}
/* ↑↑↑ reset css ↑↑↑ */

/* --- 変数定義 --- */
:root {
  --def-txt-bk:#444;
  --key-col:rgba(231, 182, 185, 1);
  --light-line:rgba(160,160,160,0.2);
}

body {
  font-size: 1.4rem;
  font-family:  "リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;;
  color: var(--def-txt-bk);
  background-color: #f9f9f9;
  position: relative;
  letter-spacing: 0.08rem;
  line-height: 2.1em;
}
main{
  overflow-x: hidden;
}
.sp-on{display: none;}
  @media (max-width: 767px) {
    .sp-on{ display: block;}
  }

.bg__night{
    background-color: #011844;
  }
  
.kakko-fit{
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.txt_in-sub{
  font-size: 0.85em;
}  

.hover_link-bg,
.hover_link-txt,
.hover_link-img{ 
  transition: 0.4s;
}
.hover_link-bg{ 
  color: #efefef;
  background-color: var(--def-txt-bk);
}
.hover_link-bg:hover{ background-color: var(--key-col);}
.hover_link-txt{ text-decoration: underline;}
.hover_link-txt:hover{ color:var(--key-col);}
.hover_link-img:hover{ opacity: 0.6;}




/* Headder ↓↓↓↓↓↓↓↓↓↓ */

.kakko-fit-last{
  margin-left: -0.5em;
}

.nav__box{
  position: fixed;
    top: 0;
    left:0;
  width: 100%;
  z-index: 99;
  display: flex;
  flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  padding: 30px 60px 20px;
  background: linear-gradient( 0deg, #803233, #803233);
  color: #fff;
}
.fixed-title{
  font-size: 1.35em;
  line-height: 1;
  letter-spacing: 0.1em;

}

.fixed-date{
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0.08em;
  display: flex;
  flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.date-divider{
  width:2em;
  height: 1px;
  background-color: #fff;
  margin-right: 0.75em;
}

.katakana{
  letter-spacing: 0;
  margin-left: -0.15em;
  margin-right: 0.15em;
}


nav{
  text-align: center;
  }
  nav ul{
  margin: 0 ;
  padding: 0 ;
  font-weight: 1000;
  }
  nav li{
  list-style: none;
  display: inline-block;
  margin-left: 13px;
  
  }
 
  nav a{
  text-decoration: none;
  color: #fff;
  }
  nav a.current{
  color: #00B0F0;
  border-bottom:1px solid #00B0F0;
  }
  nav a:hover{
  color: #cdb788;
  border-bottom:1px solid #cdb788;
  transition : all 0.5s ease 0s;
  }

  a.jump_point {height: 1px;
    display: block;
    padding-top: 100px;
    margin-top: -100px;
/*    margin-top: -40px;*/
    }





@media (max-width: 767px) {
  .nav__box{
    display: block;
    padding: 24px 5% 18px;
  }
  .fixed-title{
    margin-bottom: .4em;
  }
  .fixed-date{
    font-size: 1em;
    justify-content: flex-start;
  }
  /*ハンバーガーメニュー*/
  .hamburger {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 50px;
    height: 40px;
    cursor: pointer;
    z-index: 300;
  }
  
  .hamburger__line {
    position: absolute;
    width: 30px;
    height: 2px;
    right: 0;
    background-color: #fff;
    transition: all 0.5s;
  }
  
  .hamburger__line--1 {
    top: 8px;
  }
  
  .hamburger__line--2 {
    top: 18px;
  }
  
  .hamburger__line--3 {
    top: 28px;
  }
  
  /*ハンバーガーがクリックされたら*/
  .open .hamburger__line--1 {
    transform: rotate(-45deg);
    top: 18px;
  }
  
  .open .hamburger__line--2 {
    opacity: 0;
  }
  
  .open .hamburger__line--3 {
    transform: rotate(45deg);
    top: 18px;
  }
  
  /* 
  sp-nav(ナビ)
  =================================== */
  .sp-nav {
    position: fixed;
    right: -100%;
    /*ハンバーガーがクリックされる前はWindow右側に隠す*/
    top: 0;
    width: 70%;
    /* 出てくるスライドメニューの幅 */
    height: 100%;
    background-color: #e7b6b9;
    transition: all 0.5s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */
  }
  
  /*ハンバーガーがクリックされたら右からスライド*/
  .open .sp-nav {
    right: 0;
  }
  
  
  /* 
  black-bg(ハンバーガーメニュー解除用bg)
  =================================== */
  .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 100;
  }
  
  /*ハンバーガーメニューが開いたら表示*/
  .open .black-bg {
    opacity: 0.3;
    visibility: visible;
  }

  .sp-nav ul li {
    font-size: 2.0rem;
    position: relative;
    top: 150px;
    display:flex;
    justify-content:space-between; 
    margin-bottom: 30px;
    padding-left: 20px;

  }
}




/* Headder */

.top-view__area{
  position: relative;
  width: 100vw;
}
.top-view__img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* height: 0; */
  /* padding: 0 0 56.25%; */
  overflow: hidden;
  background-image: url(../img/mv.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
}
.top-view__img iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* iframeでもcover風に見せたい */
}
@media (max-width: 767px) {
 
  .top-view__img{
    aspect-ratio: 4 / 3;

    width: 100%;
    height: auto;
      background-size: cover;
      background-repeat: no-repeat;
      background-position:center center;
    -webkit-animation: move 60s 0s infinite alternate linear forwards running;
            animation: move 60s 0s infinite alternate linear forwards running;
  }
  .top-view__img iframe{
    top: 0;
    left: 50%;
    height: 100%;                 /* まず高さを枠にフィット */
    width: 177.78%;               /* 16/9 ≒ 1.7778倍 → 横を拡大してcover化 */
    transform: translateX(-50%);
}

@-webkit-keyframes move {
  0% { background-position:20% center;}
  50% { background-position:center center;}
  100% { background-position:20% center;}
}

@keyframes move {
  0% { background-position:20% center;}
  50% { background-position:center center;}
  100% { background-position:20% center;}
}
}






.sec-bg__color-base{
  background-color: rgba(246, 234, 208, .3);
}
.sec-bg__color-wh{
  background-color: #fdfdfd;
}



/* ------ */



@media (max-width: 767px) {
  
  .str__link-btn{
    display: block;
    width: 100%;
  }
}
/* ------ */


/* コンテンツ幅 ↓↓↓↓↓↓↓↓↓↓ */
.sec-area{
  width: 100%;
  padding: 120px 0;
}
.cont-area{
  width: 1000px;
  max-width: 90%;
  margin: 0 auto;
}
.cont-inner-area{
  width:85%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .sec-area{
    padding: 80px 0;
  }
  .cont-inner-area{
    width:100%;
  }
}
.sec01 .cont-inner-area{
  margin-top: 0;
}
.margin-area {
  margin-top: 50px;
}
/* ↑↑↑↑↑↑↑↑↑↑ コンテンツ幅 */


/* Section区切りの横長画像 ↓↓↓↓↓↓↓↓↓↓ */
.sec-img{
  width:100%;
  height:420px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
}
.sec-img__on-box{
  width: 100%;
  height: 100%;
  padding: 100px 0;
  background-color: rgba(160,160,160,0.5);
}
.sec-img__on-box > img{
  margin: 0 auto;
  height: 100%;
}
.sec-img__day { background-image: url(../img/sec_day.jpg);}
.sec-img__kannon {background-image: url(../img/kannonbnr.jpg)}
.sec-img__cafe { background-image: url(../img/sec_cafe.jpg);}
.sec-img__shop { background-image: url(../img/sec_shop.jpg);}
.sec-img__ws { background-image: url(../img/sec_ws.jpg);}
/* ↑↑↑↑↑↑↑↑↑↑ Section区切りの横長画像 */

@media (max-width: 767px) {
.sec-img__day{
  height: 220px;
}
}



/* カード ↓↓↓↓↓↓↓↓↓↓ */
.str__card-item__wrap{
  width: 100%;
  display: grid;
    grid-template-rows: calc(50%-20/2px) calc(50%-20/2px) ;
    grid-template-columns: auto auto;
    gap: 16px;
}
@media (max-width: 767px) {
  .str__card-item__wrap{
    display: block;
  }
  .str__card-item__wrap>li+li{
    margin-top: 20px;
  }
}


/* カード ↑↑↑↑↑↑↑↑↑↑  */


.link-style-1{
  text-decoration: underline;
}


.txt__bold { font-weight: bolder;}
.skin__strong-txt {font-size: 1.15em;}
.skin__txt-sub {font-size: 0.9em; line-height: 2em;}
.skin__night-txt-color{color:#fff;}
.skin__txt-justyfy{text-align: justify;}


.str__flex-def,
.str__flex-ctr{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.str__flex-ctr {
  align-items: center;
}







.cont-title{
  font-size: 1.75em;
    letter-spacing:0.1em;
    line-height: 1;
    text-align: center;
  margin-left: -0.1em;
}
.cont-title > span{
  display: block;
  font-size: 0.6em;
    margin-bottom: 20px;
  color: #D0A900;
}
.cont-copy{
  font-size: 1.1em;
  text-align: left;
/*  margin-bottom: -32px;*/
}
.cont-copy.special{
  font-size: 1.5em;
  color: #D0A900;
}
.cont-txt {
  text-align: justify;
}
.cont-info-box{
  margin-top: 20px!important;
  padding-left: 20px;
  border-left: solid 2px #D0A900;
}
.cont-info-list{
  line-height: 2.1;
  display: flex;
    flex-flow:row wrap;
}
.cont-info-list dt{ 
  width: 4.5em;
}
.cont-info-list dd{ 
  width:calc(100% - 4.5em);
  padding-left: 1em;
  text-indent: -1em;
}
.cont-info-list dd::before{ 
  content: "";
  padding-right:1em;
}
.cont-btn{
  display: block;
  width: 60%;
  padding: 1em;
  margin: 0 auto;
  border-radius: 40px;
  text-align: center;
}
.cont-ex-box{
  padding: 3rem 4rem;
  background-color: rgba(255,255,255,0.7);
  font-size: 0.85em;
    line-height: 2.1;
    text-align:justify;
}
.cont-ex-box__inner-box-l{ flex-basis: 11%;}
.cont-ex-box__inner-box-r{ flex-basis: 86%;}

.notice,
.cont-inner-area,
.cont-copy,
.cont-txt,
.cont-img,
.cont-info-box,
.cont-ex-box,
.cont-btn,
.cont-inner-album{
  margin-top: 40px;
}
@media (max-width: 767px) {

  .cont-title{
    line-height: 1.5;
  }
  .cont-title > span{
    margin-left: 0;
    margin-bottom: 16px;
  }
  .cont-copy{
    font-size: 1.1em;
  }
  .cont-info-box{
    padding: 0 ;
    border-left: none;
  }
  .cont-info-list{
    display: block;
  }
  .cont-info-list dt{ 
    width: 100%;
    font-weight: bolder;
    position: relative;
  }
  .cont-info-list dt::after{ 
    position: absolute;
      top: calc(50% - 1px);
      right: 0;
      content: "";
    display: block;
    width: 80%;
    height: 1px;
    background-color: var(--light-line);
  }

  .cont-info-list dt:not(:first-of-type){ 
    margin-top: 24px;
  }
  .cont-info-list dd{ 
    width: 100%;
    padding-left: 0;
    text-indent: 0;
    line-height: 1.5;
  }
  .cont-info-list dd::before{ 
    display: none;
  }
  .cont-btn{
    width: 100%;
  }
  .cont-ex-box{
    padding: 24px;
    font-size: 0.9em;
      line-height: 2;
      text-align:justify;
  }
  .cont-ex-box__inner-box-l{
    flex-basis: 30%;
    margin: 0 auto;
  }
  .cont-ex-box__inner-box-r{ 
    flex-basis: 100%;
    margin-top: 20px;
  }
}





/* ----- */
.str__row-list li{
  display: inline-block;
  margin-right: 1.1em;
  margin-bottom: 15px;
}
.str__row-list li:last-child{
  margin-right:0;
}
/* ----- */



/* 参拝案内ーーーーー */
.notice{
  display:block;
  padding: 1em 0;
  text-align: center;
  color:#fff;
  letter-spacing: 0.1em;
  background-color: #803233;
}
.googlemap{
  padding: 10px;
  border: solid 1px var(--light-line); 
  margin-top: 48px;
}
.access-list,
.fee-time-list{
  margin-top: 60px;
}
.access-list__title,
.fee-time-list__title{
  line-height: 1;
  padding-bottom: 0.75em;
  margin-bottom: 30px;
  border-bottom: solid 1px var(--def-txt-bk);
}
.access-list__title > span,
.fee-time-list__title > span{
  font-size: 1.25em;
  margin-right: 0.1em;
}
.access-list__inner-box-wrap{
  display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  padding: 36px 0;
  border-bottom:solid 1px var(--light-line);
}
.access-list .access-list__inner-box-wrap:first-of-type{
  padding-top: 10px;
}
.fee-time-list__inner-box-wrap{ 
  display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.access-list__inner-box-l{ flex-basis: 20%;}
.access-list__inner-box-r{ flex-basis: 80%;}
.fee-time-list__inner-box{ 
  flex-basis: calc(50% - 30px);
  line-height: 1;
}
.access-list__inner-box-title{
  line-height: 1;
}
.access-list__inner-box-title>span{
  display: block;
  margin-bottom: 0.6em;
  margin-left: -0.5em;
  font-size: 0.9em;
}
.access-list__sub-txt,
.fee-time-list__sub-txt{
  font-size: 0.85em;
  line-height: 1;
}
.access-list__sub-txt{ margin-top: 30px;}
.fee-time-list__sub-txt{ margin-top: 20px;}

.access-list__sub-txt li,
.fee-time-list__sub-txt li{
  margin-top: 1em;
}
@media (max-width: 767px) {
  .notice{
    padding: 1em 2em;
    line-height: 1.6;
  }

  .googlemap > iframe{
    height: 280px;
  }
  .access-list__inner-box-wrap,
  .fee-time-list__inner-box-wrap{
    display: block;
  }
  .access-list .access-list__inner-box-wrap:first-of-type{
    padding-top: 0;
  }
  .access-list__inner-box-r > img{
    display: none;
  }
  .access_list__alter-txt{
    line-height: 1.6;
  }
  .access_list__alter-txt li{
    margin-top: 1em;
    text-indent: -1em;
    padding-left: 1em;
  }
  .access_list__alter-txt li:before{
    content: "○";
  }
  .access-list__inner-box-title>span{
    display: inline-block;
    font-size: 1em;
    margin-bottom: 0 .5em 0 0;
  } 
  .access-list__sub-txt,
  .fee-time-list__sub-txt{
    font-size: 0.9em;
    line-height: 1.6;
  }
  .access-list__sub-txt{ margin-top: 30px;}
  .fee-time-list__sub-txt{ margin-top: 20px;}
  
  .access-list__sub-txt li,
  .fee-time-list__sub-txt li{
    margin-top: 0.6em;
  }
  .fee-time-list__inner-box+.fee-time-list__inner-box{
    margin-top: 60px;
  }
}
.fee-time-list__main-txt {
  margin-bottom: 15px;
}


/* footerーーーーー */
.footer__box{
  padding: 40px 100px;
  background-color: #efefef;
  display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer__inner-box-l{
  flex-basis:1;
  min-width: 250px;
  margin-right: 40px;
}
.footer_logo{
  width: 100%;
}
.footer__inner-box-c{
  flex-basis:2
}
.meta-info-list{
  display: flex;
    flex-flow: row wrap;
    align-items: center;
  font-size: 0.8em;
    line-height: 2;
}
.meta-info-list dt {flex-basis: 4em;}
.meta-info-list dd {flex-basis: calc(100% - 4em);}
.meta-info-list dd::before{
  content: "｜";
  margin-right: 0.5em;
}
.footer__inner-box-r{
  flex-basis:1;
  margin-left: 40px;
}
.sns-icon-list{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  line-height: 1;
}
.sns-icon{
  display: block;
  width:36px;
}
.sns-icon:not(:first-child){
  margin-left:20px
}

@media (max-width: 767px) {
  .footer__box{
    padding: 40px 5% 30px;
      flex-flow: column wrap;
      justify-content: start;
      align-items: start;
  }
  .footer__inner-box-l{
    flex-basis:100%;
    margin: 0 auto 16px;
  }
  .footer_logo{
    width: 75%;
  }
  .footer__inner-box-c{
    flex-basis:100%;
    margin: 0 auto 20px;
  }
  .meta-info-list{
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.8;
  }
  .footer__inner-box-r{
    flex-basis:100%;
    margin:0;
  }
  .sns-icon{
    width:40px;
  }
  .sns-icon:not(:first-child){
    margin-left:36px
  }

}

.copyright{
  padding: 24px 0;
  font-size: 1.2rem;
    line-height: 1;
    text-align: center;
    color: #fff;
  background-color: #000;
}

/* .effect */


.fade-in {
  opacity : 0;
  transform : translate(0, 20px);
  transition : all 1000ms;
}  
.fade-in.scroll-in {
  opacity : 1;
  transform : translate(0, 0);
}


#loading {
  width: 100vw;
  height: 100vh;
  background-color: rgb(15, 24, 30);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: 2s;
  /* animation: load7 2.5s both ; */
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

.loading-icon{
  width: 100px;
  position: relative;
    top:calc(50% - 62px);
    left:calc(50% - 50px);
    /* animation: load-item 2s both ; */
}

/* @keyframes load7 {
  0%{ opacity: 1}
  40%{ opacity: 1}
  100% { opacity: 0; visibility: hidden}
 }

 @keyframes load-item {
  0%{ opacity: 0.1}
  30%{ opacity: 1}
  50%{ opacity: 1}
  100% { opacity: 0; visibility: hidden}
 } */


 .movie {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;
 }

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

 .cont-movie {
  width: 100%;
  height: 100%;
 }


.top-txt { 
 position: absolute;
 width: 100%;
 bottom: 0;
 color: #fff;
 padding:20px;
 margin:0;
 background: linear-gradient( 180deg, #705e50, #705e50);
}
@media (max-width: 767px) {
.top-txt {
  position: relative;
  bottom: auto;
  padding: 10px;
}
}
.toptext {
  font-size: clamp(1.8rem, 1.5vw + 1rem, 4rem);
  text-align: center;
}
.top-subtxt {
  font-size: clamp(1.1rem, 1.5vw + 1rem, 2.3rem);
  text-align: center;
  padding-top: 15px;
}
@media (max-width: 767px) {
.top-subtxt {
  padding-top: 5px;
}
}
.top0{
  margin-top: 0!important;
}
.mv_img{
  margin: 40px 0 60px;
}
@media (max-width: 767px) {
.mv_img{
  margin: 20px 0 30px;
}
}
.cont-txt.short{
  margin-top: 20px;
}
.js-slide{
  width: calc(100% + 20px);
  margin-left: -10px;
}
.js-slide li .slide_img{
  margin: 0 10px;
}
@media (max-width: 767px) {
.js-slide li .slide_img{
  margin: 0 5px;
}
}
.slick-prev, .slick-next{
  background-color: #000!important;
  width: 30px!important;
  height: 30px!important;
  z-index: 3;
}
@media (max-width: 767px) {
.slick-prev, .slick-next{
  width: 20px!important;
  height: 20px!important;
}  
}
.slick-prev{
  left: -30px!important;
}
@media (max-width: 767px) {
.slick-prev{
  left: -15px!important;
}
}
.slick-next{
  right: -30px!important;
}
@media (max-width: 767px) {
.slick-next{
  right: -15px!important;
}
}
.slick-next:before,.slick-prev:before{
  content: ''!important;
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 10px;
  opacity: 1!important;
}
@media (max-width: 767px) {
.slick-next:before,.slick-prev:before{
  width: 5px;
  height: 5px;
  top: 7px;
  border-width: 1px;
}
}
.slick-next:before{
  transform: rotate(45deg);
  left: 8px;
}
.slick-prev:before{
  transform: rotate(-135deg);
  left: 12px;
}
@media (max-width: 767px) {
.slick-prev:before{
  left: 7px;
}
}


.ex-box{
  padding: 1em 2em;
  background-color: rgba(234, 156, 40, 0.15);
  border-radius: 6px;
}

/* ––––––––––––––御朱印ボックス */

.goshuin-box{
  width: 100%;
  margin-top: 80px;
}
.goshuin-box h3{
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  padding: 0.8em;
  background: linear-gradient( -45deg, #bf5a35, #803233);
}
.goshuin-box .inner-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 10%;
  background-color: #fff;
}
.goshuin-box .inner-wrapper .img-box{
  width: 25%;
  filter: drop-shadow(6px 6px 12px #09090927);
}
.goshuin-box .inner-wrapper .img-box img{
  display: block;
  width: 100%;
}
.goshuin-box .inner-wrapper .txt-box{
  width: 60%;
}
.goshuin-box .inner-wrapper .txt-box p{
  width: 100%;
}
.goshuin-box .inner-wrapper .txt-box ul{
  margin-top: 1em; 
  padding-top:1em ;
  border-top: solid 1px #99999935;
  font-size: 0.9em;
}

/* ––––––––––––––トップ タイトル&日付 */

.title, .date{
  position: absolute;
  content: "";
  z-index: 2;
  filter: drop-shadow(4px 4px 8px #2a05018b);

}
.title{
  width: 15%;
  top: 60px;
  right: 5%;
}
.date{
  width: 45%;
  bottom: 60px;
  left: 5%
}
@media (max-width: 767px) {

.title{
  width: 20%;
  top: 20px;
}
.date{
  width: 60%;
  bottom: 20px;
}
}