/* リセット */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html {
        overflow-x: hidden;
    }

    body, html {
        margin: 0;
        font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
        font-size: 10px;
        letter-spacing: 1px;
        color:252525;
        overflow-x: clip;
    }
/*common*/
a{
    color:#e95024;
    text-decoration: none;
}
a:hover{
    color:darkred;
}
p{
    font-size:clamp(1.5rem,2.5vw,1.6rem);
    line-height: 1.8;
    word-break: break-all;
    text-align: justify;
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    position: relative;
}
.btn_s a{
    display: block;
    width:250px;
    padding:1rem;
    margin:0 auto;
    background:#e95024;
    border:#e95024 thin solid;
    color:#fff;
    font-size: 1.5rem;
    text-align: center;
}
.btn_s a:hover{
    background:#fff;
    border:#e95024 thin solid;
    color:#e95024;
}

.flex-area{
    display: flex;
    flex-wrap: wrap;
}
.flex-between{
    justify-content: space-between;
}
.flex-center{
    justify-content: center;
}
.flex-left{
    justify-content: flex-start;
}
.flex-right{
    justify-content: flex-end;
}
.flex-around{
    justify-content: space-around;
}
.flex-middle{
    align-items: center;
}
.flex-nowrap{
    flex-wrap: nowrap;
}

table{
    border-collapse: collapse;
    width:100%;
    background-color: #fff;
}

td{
    border:thin #999 solid;
    padding:1%;
}
.sp-only{display: none;}
.pc-only{display: block;}
.hihyouji{display: none;}

@media (max-width: 768px) {
    .flex-area{
    flex-direction: column;
}
    .container{
    width:100%;
    margin:0 auto;
    position: relative;
}
    .sp-only{display: block;}
    .pc-only{display: none;}
    
.table-scroll {
  overflow-x: auto;
  width: 100%;
-webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 600px;
  border-collapse: collapse;
}

}


/*トップページスライド*/

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  animation: none;
}
@media (max-width: 768px) {
  .slide {
    object-position: 60% center;
  }
}

/* 各スライドに別のアニメーションを設定 */
.slide:nth-child(1) {
  animation: fadeZoom1 30s ease-in-out infinite;
}
.slide:nth-child(2) {
  animation: fadeZoom2 30s ease-in-out infinite;
}
.slide:nth-child(3) {
  animation: fadeZoom3 30s ease-in-out infinite;
}

/* それぞれのアニメーション（重なりを長めに） */
@keyframes fadeZoom1 {
  0%   { opacity: 1; transform: scale(1); }
  10%   { opacity: 1; transform: scale(1.02); }
  35%  { opacity: 1; transform: scale(1.06); }
  50%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes fadeZoom2 {
  0%   { opacity: 0; transform: scale(1); }
  33%  { opacity: 0; transform: scale(1); }
  43%  { opacity: 1; transform: scale(1.02); }
  68%  { opacity: 1; transform: scale(1.06); }
  83%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes fadeZoom3 {
  0%   { opacity: 0; transform: scale(1); }
  66%  { opacity: 0; transform: scale(1); }
  76%  { opacity: 1; transform: scale(1.02); }
  96%  { opacity: 1; transform: scale(1.06); }
  99%  { opacity: 0.3; transform: scale(1.06); } /* 徐々に薄く */
  100% { opacity: 0; transform: scale(1.06); }
}

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 74px;
  height: 255px;
  pointer-events: none; /* マウスイベントを透過 */
}

.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 20;
  display: flex;
  align-items: center;
    background: linear-gradient(rgba(25,25,25,0.9), 70%, rgba(25,25,25,0));
}
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img {
  height: 60px;
}

/* Global nav */
.global-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}
.global-nav a {
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
}

/* 矢印アイコン */
.global-nav .arrow {
  margin-left: 0.3em;
  font-size: 0.9em;
}

/* サブメニュー（初期状態は非表示） */
.global-nav .sub-menu {
  display: block;
  position: absolute;
    top:100%;
    left:0;
  background: rgba(255,255,255,0.9);
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 160px;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    transform: translateY(-10px);
}

/* サブメニューのリンク */
.global-nav .sub-menu li {
  padding: 0;
}

.global-nav .sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.global-nav .sub-menu li a:hover {
  background-color: rgba(234,80,36,0.4);
}

/* メニュー項目を相対配置に */
.global-nav li {
  position: relative;
}

/* ホバーでサブメニュー表示 */
.global-nav li.has-sub:hover .sub-menu {
  display: block;
  opacity: 1;
  transform: translateY(5px);
    pointer-events: auto;
}

/* Drawer toggle (2本線) */
.drawer-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 30;
}
.drawer-toggle span {
  display: block;
  height: 2px;
  background: white;
  transition: 0.3s;
    width:30px;
}

/* Drawer open状態（×に切り替え） */
.drawer-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.drawer-toggle.active span:nth-child(2) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* Drawer全画面メニュー */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
    background-image: url(../img/bg_drawer.jpg);
    background-size: cover;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;

  /* アニメーション用 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.drawer-box{
   display: flex;
    max-width:750px;
    margin:0 auto;
    width:100%;
}
.title-box{
    order:2
}
.title-box h2 {

  writing-mode: vertical-rl;
  font-size: 3.6rem;
  margin:8rem;
    color: #252525;
    letter-spacing: 0.5em;
}

.nav-box{
    order:1;
    max-width:750px;
    margin:0 auto;
    width:50%;
}
.drawer nav {
  writing-mode: vertical-rl;
  font-size: 1.8rem;
  margin:clamp(1em, 2.5vw, 2em);
}
.drawer nav li{
    list-style: none;
}
.drawer nav a {
  color: #252525;
  text-decoration: none;
  margin: 1em 0;
}
.drawer .d-menu-title{
    margin:clamp(0.5em, 2.5vw, 1em);;
}
.drawer .d-menu-title a{
    font-size:1.2em;
    margin:0;
}
.drawer .d-submenu li a{
    font-size:1em;
    margin-top:1em;
    line-height:clamp(1.8em, 2.5vw, 2em);
}


/* Closeボタン */
#closeBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 4rem;
  color: #252525;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .global-nav {
    display: none;
  }
  .drawer-toggle {
    display: flex;
  }
    .drawer {
    background-image: url(../img/bg_drawer.jpg);
    background-size: cover;
    background-position: center 0%;
    align-items: center;
    justify-content: center;
  align-items: center;
}
    .drawer-box{
        display: flex;
        flex-direction: column;
        width:100vw
    }
    .title-box{ 
    order:1
    }
    .title-box h2 {
  font-size: 2.4rem;
    letter-spacing: 0.2em;
        width:35px;
        margin:0 auto;
}
    .nav-box{
    order:2
    }
    .drawer nav {
  writing-mode: vertical-rl;
  font-size: 1.6rem;
    width:inherit;
    }
}
@media (max-width: 520px) {
    .nav-box{
        width:100%;
    max-width: inherit;
    }
    .drawer nav {
  font-size: 1.3rem;
    width:auto;
    margin:0 auto;
    }
}

/*footer*/
footer{
    width:100%;
    background-color: #e95024;
    margin:4rem 0 0 0;
    padding:4rem 0;
    color:#fff;
    font-size:1.4rem;
    text-align: center;
}
footer h1{
    font-size:2rem;
    color:#fff;
    font-weight:lighter;
    margin-bottom:1em;
}
address{
    font-style: normal;
}
/* Responsive */
@media (max-width: 768px) {
    footer{
    margin:0rem 0 0 0;
}
}

/*topコンテンツ部分*/
/*龍の石鳥居*/
.ryu_ishitorii{
    width:100vw;
    background-image: url(../img/bg_fudeline.png);
    background-position: right top;
    background-repeat: no-repeat;
    min-height:786px;
    padding-top: 8rem;
}
.ryu-textbox{
    writing-mode: vertical-rl;
}

.ryu-textbox h3{
    font-size:2.8rem;
    font-weight: 300;
}

.ryu-textbox p{
    max-height: 500px;
    word-break: break-all;
    margin:5rem
}
/* Responsive */
@media (max-width: 768px) {
    .ryu_ishitorii{
    background-image: url(../img/bg_fudeline.png);
    background-position: left bottom;
    background-size:contain;
}
    .ryu-photo{
        width:100%;
    }
    .ryu-photo img{
        width:100%;
        max-width:500px;
    }
    .ryu-textbox{
        width: 96%;
        margin:0 auto;
        height:400px;
}
    .ryu-textbox h3{
    margin: 1.5rem auto;
    writing-mode: vertical-rl;
    display: block;
}
    .ryu-textbox p{
    max-height: inherit;
    word-break: break-all;
    margin:2.5rem;
    writing-mode:inherit;
    font-size:clamp(15px,2.5vw,16px)
}
}

/*ニュース*/
.news{
    margin:8rem 0;
    padding:8rem 0;
    border-top: #eee thin solid;
    border-bottom: #eee thin solid;
}
a.news-card{
    width:45%;
    margin:0.5rem;
    padding:0.5rem;
    position: relative;
    display: flex;
    font-size:1.3rem;
}
a.news-card .icon-box{
    width:25%;
    aspect-ratio: 1 / 1;
    overflow: hidden; 
}
a.news-card .icon-box img{
    object-fit: cover;
    width:100%;
    height: 100%;
    display: block;
}
a.news-card .news-txt{
    width:75%;
    padding:clamp(1em, 2.5vw, 1.2em);
    border: #eee thin solid;
    box-sizing: border-box;
    color:#252525;
}
a.news-card .news-txt:hover{
	background-color:#f9cdc0;
    transition : 1s;
}

a.news-card .news-txt h4{
    font-size:clamp(1.1em, 2.5vw, 1.3em);
    font-weight: 600;
    margin-bottom:0.5em
}
#news h2{
    font-size:1.5em;
    font-weight: bold;
    text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
a.news-card{
    width:98%;
}
    a.news-card .icon-box{
    width:25%;
    max-width:150px;
    aspect-ratio: 1 / 1;
    overflow: hidden; 
}
    
}

/*バナーエリア*/
.banner{
    margin:4rem 0;
}
.banner-box{
    width:100%;
    max-width:750px;
    margin:0 auto;
    text-align: center;
}
.banner-box div{
    padding:1rem;
}
.banner-box div img{
    width: 100%;
}

.jinja750-box{
    display: flex;
    border:thin #ccc solid;
    width:100%;
    max-width:1085px;
    margin:0 auto;
    position: relative;
}
.jinja750text{
    width:100%;
    text-align: center;
    max-width:785px;
}
.jinja750title{
    padding:1em;
    border-bottom:thin #eee solid;
    margin:0 auto 1em;
    width:750px;
}
.jinja750title span{
    font-size:3em;
    font-weight:bolder;
    display: inline-block;
}
.jinja750title span.big{
    font-size:4em;
    font-weight:bolder;
    margin:0 0.2em;
}
.jinja750img{
    width:30%;
    max-width:300px;
    height:400px;
    overflow: hidden
}
.jinja750img img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center bottom;
}
.jinja750text p{
    padding:1em;
}
.btn_750 a{
    background-color: #e95024;
    color:#fff;
    font-weight: bold;
    font-size:1.5em;
    border:thin solid #e95024;
    display: block;
    width:300px;
    height:40px;
    padding:0.5em;
    margin:0 auto;
}
.btn_750 a:hover{
    background-color: #fff;
    color:#e95024;
}
.douban{
    background-color: #f5f3f0;
    width:80%;
    margin:1em auto 0.5em;
    box-shadow: 1px 1px 3px #999;
}
.douban_title{
    background-image: url(../img/bg_moushikomi.jpg);
    background-position: right top;
    padding:0.5em;
    font-size: 2.5em;
    font-weight:bold;
    color:brown;
}
.douban_title span{
    display: inline-block;
}
.douban p span{
    display: inline-block;
}

.reitaisai-box{
    display: flex;
    border:thin #ccc solid;
    width:100%;
    max-width:1085px;
    margin:0 auto;
    position: relative;
    padding:0.5em 0;
}
.reitaisaitext{
    width:100%;
    text-align: center;
    max-width:785px;
}
.reitaisaititle{
    padding:1em;
    border-bottom:thin #eee solid;
    margin:0 auto 1em;
    width:750px;
}
.reitaisaititle span{
    font-size:3em;
    font-weight:bolder;
    display: inline-block;
}
.jinja750title span.big{
    font-size:4em;
    font-weight:bolder;
    margin:0 0.2em;
}
.reitaisaiimg{
    width:30%;
    max-width:300px;
    height:400px;
    overflow: hidden
}
.reitaisaiimg img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center bottom;
}
.reitaisaitext p{
    padding:1em;
}
.reitaisai-shosai{
    background-color: #fce4d4;
    width:100%;
    margin:1em auto 0.5em;
}
.reitaisai-shosai p{
    text-align: justify;
}



@media (max-width: 820px) {
    .jinja750-box{
    display: flex;
    flex-direction: column;
}
    .jinja750img{
    width:100%;
    max-width:inherit;
    height:400px;
    overflow: hidden
}
    .jinja750title{
    padding:1em;
    border-bottom:thin #eee solid;
    margin:0 auto 1em;
    width:100%;
}
    .reitaisai-box{
    display: flex;
    flex-direction: column;
}
    .reitaisaiimg{
    width:100%;
    max-width:inherit;
    height:400px;
    overflow: hidden
}
    .reitaisaititle{
    padding:1em;
    border-bottom:thin #eee solid;
    margin:0 auto 1em;
    width:100%;
}
    
}



/*blockmenu*/
.blockmenu{
    width:45%;
    height:495px;
    background-repeat: no-repeat;
    background-size: cover;
    font-size:1.5rem;
    position: relative;
    margin: 5px;
    writing-mode: vertical-rl;
}
.blockmenu-area{
    display: flex;
    flex-wrap: wrap;
}
.blockmenu-text-box{
    position: absolute;
    top:240px;
    left:0;
    background-color: rgba(0,0,0,0.65);
    width:320px;
    min-height:220px;
    max-height:240px;
}
.blockmenu-text-box ul{
    padding:1em 3em 1em 1em;
    width:calc(100% - 80px);
    display: flex;
    flex-direction: column;
  justify-content: space-between;
}
.blockmenu-text-box li{
    list-style: none;
    line-height: 2;
}
.blockmenu-text-box li a{
    display: block;
    color:#fff;
    list-style: none;
    font-size: 1.1em;
    width:100%;
    height: 100%;
    padding:0.2em;
}

.blockmenu-text-box li a:hover{
    color:#e95024;
    transition:0.7s;
    background:rgba(255,255,255,0.5);
}
.blockmenu-text-title {
  position: absolute;
  width: 70px;
  height: 325px;
  top: 10px;
  left: 10px;
  background-color: #e95024;
  padding-top: 2em;
    }
.blockmenu-text-title .title-text {
  color: #fff;
  font-size: 1.6em;
    font-weight: lighter;
    display:  flex;
    justify-content: flex-start;
    align-items: center;
    width:49px;
    margin:0 auto;
    position: absolute;
    left: 50%;
  transform: translateX(-50%);
}
.blockmenu-text-title .title-icon {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.2em;
}

.blockmenu.jinja_goannai{
    background-image: url(../img/blockmenu_bg01.png);
}

.blockmenu.gokigan{
    background-image: url(../img/blockmenu_bg02.png);
}

.blockmenu.omairi{
    background-image: url(../img/blockmenu_bg03.png);
}

.blockmenu.shinto{
    background-image: url(../img/blockmenu_bg04.png);
}

.kugiri{
    background: url(../img/img_kugiri.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 66px;
    margin:4rem 0;
}
.kugiri img{
    width: 100%;
    max-width:712px;
}

/* Responsive */
@media (max-width: 820px) {
.blockmenu{
    width:48%;
    height:495px;
    background-position: 40% center
}
    
}
@media (max-width: 520px) {
.blockmenu{
    width:100%;
    height:495px;
    background-position: 40% center
}
    .blockmenu-area{
    display: inherit;
}
}



/*特別神事*/
.tokubetsu{
    font-size: 1.5rem;
}
.tokubetsu-head{
    display: flex;
    margin-bottom:2em;
}
.tokubetsu-head-title{
    font-size: 1.6em;
    font-weight: lighter;
    margin:0 2em;
    writing-mode: vertical-rl;
}
.tokubetsu-title{
    font-size: 1.6em;
    font-weight: lighter;
    margin:0 0 0 2em;
    writing-mode: vertical-rl;
}
.tokubetsu-lead{
    display: flex;
    justify-content: center;
    height:250px;
    margin:8em auto;
    writing-mode: vertical-rl;
}

.img_tokubetsu_wide{
    width:100%;
}
.tokubetsu-narabi{
    display: flex;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    position: relative;
}
.img_tokubetsu_wide img{
    width:100%;
    height: 300px;
    object-fit: cover;
    object-position: center center;
}
.img_tokubetsu_square{
    width:45%;
}
.img_tokubetsu_square img{
    width:100%;
}
.tokubetsu-text-box{
    writing-mode: vertical-rl;
    flex-direction: row-reverse;
    padding:2em;
    height:300px;
    position: relative;
}
.btn-tate{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    margin:0 1em;
}
.btn-tate a{
    display: block;
    height:150px;
    padding:1rem;
    margin:0 auto;
    background:#e95024;
    border:#e95024 thin solid;
    color:#fff;
    font-size: 1.4rem;
    text-align: center;
    writing-mode: vertical-rl;
}

@media (max-width: 820px) {
    .tokubetsu-narabi{
    display: flex;
    flex-direction: column;
    width:100%;
    max-width:inherit;
}
    .tokubetsu-text-box{
    padding:1em;
    }

}
@media (max-width: 520px) {
.img_tokubetsu_square img{
    width:100%;
    height:200px;
    object-fit: cover;
    object-position:center 75%
}
}



/*instagram*/

/*topic*/
.topic{
    padding:8rem 0;
}
.topic-area{
    display: flex;
}
.topic-area a{
    display: block;
    width:100%;
    max-width:300px;
}
.topic-area a:hover{
    opacity: 0.7;
    transition : 1s;
}
.topic-box{
    width:100%;
    height:300px;
    background-repeat: no-repeat;
    background-size: cover;
    writing-mode: vertical-rl;
    font-size: 2rem;
    color:#fff;
    text-shadow: #000 2px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:#fff thin solid;
}
.topic-box.suginami{
    background:linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3)), url(../img/bg_topic_suginami.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.topic-box.ujikoseinen{
    background:linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3)), url(../img/bg_topic_ujikoseinen.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.topic-box.keidai{
    background:linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3)), url(../img/bg_topic_keidai.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media (max-width: 768px) {
    .topic-box{
        flex: 1;
    height:300px;    
    margin:2px;
    }
}
@media (max-width: 520px) {
.topic-area{
    flex-direction: column;
    justify-content: center;
}
    .topic-area a{
        max-width: inherit;
    }
    
    .topic-box{
    width:100%;
    height:300px;    
    margin:2px auto;
    }
}

/*---------------------------------------------------------
セカンドページ
----------------------------------------------------------*/
.second-top{
    position: relative;
    overflow: hidden;
}
.second-top img{
    width:100%;
    height: 450px;
    object-fit: cover;
    object-position: center center;
}
    
.pan{
    font-size: 1.5rem;
        padding:0.5em;
}
.annai{
    padding: 4em 0;
    background-image: url(../img/bg_annai.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size:1.5rem
}
.annai-textbox{
    writing-mode: vertical-rl;
}
.annai-textbox h2{
    font-size:2em;
    font-weight: 300;
}
.annai-textbox h3{
    font-size:1.5em;
    font-weight: 300;
}

.annai-textbox p{
    max-height: 600px;
    word-break: break-all;
    font-size:clamp(1.2em,2.5vw,1.3em);
    padding:2em 1em 0 0;
}
.annai-textbox p span{
    display: inline-block;
}
.annai-textbox .cBox{
    margin:0 2em;
}
.deity {
    display: flex;
    font-size:clamp(1.2em,2.5vw,1.3em);
    writing-mode: vertical-rl;
    justify-content: start;
    align-items: start;
    flex-direction: row;
    margin-top:1em;
    padding: 0 0.2em;
  }
.deity .kamisama{
    height:9em;
    font-weight:bold;
}

/* Responsive */
@media (max-width: 768px) {
.annai-textbox{
    writing-mode:inherit;
    margin-left:1em;
    margin-bottom:1em
}
    .annai-textbox h2{
    padding:0em 0 1em 0;
}
    .annai-textbox h3{
    margin-top:1em;
}
    .annai-textbox .cBox{
    margin:0 1em;
}
    .annai-textbox p{
        max-height:inherit;
        width:100%;
        padding:0.5em 1em 1em;
}
    .deity {
    display: flex;
    flex-direction: column;
    margin-top:0em;
    margin-left:1em;
    padding: 0.2em 0em;
    writing-mode:inherit;
  }
.deity .kamisama{
    height:auto;
    font-weight:bold;
}
}



/*second_common*/

.second{
    padding: 2em 0;
    font-size:clamp(1.4rem,2.5vw,1.6rem);
}
.second .container{
    width:98%;
    max-width:1000px;
    margin:0 auto;
    position: relative;
}
.flex-container{
    padding:0.5em 0;
    gap: 20px;
    align-items: stretch; /* 高さを揃える */
}

.tategaki-textbox{
    writing-mode: vertical-rl;
}
.textbox{
   flex: 1;
      background: #f0f0f0;
      padding: clamp(10px,2.5vw,20px);
}
.imgbox{
    flex: 0 0 360px; /* 固定幅でもOK */
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.imgbox img{
    width: 100%;
    object-fit: cover;
    flex: 1;
    object-position: center center;
}
.second .container h2{
    padding: 2em 0.6em;
    font-size:2em;
    font-weight: 300;
}
.textbox h3{
    font-size:1.5em;
    font-weight: 300;
}
.textbox h4{
    font-size:1.2em;
    font-weight: 600;
    margin-top:1em;
}

.textbox p{
    font-size:1em;
    padding:1em;
}
.textbox .cBox{
    margin:clamp(1em,2.5vw,2em);
    border-bottom: thin #999 dotted;
}
.textbox .cBox:last-child{
    border-bottom: none;
}
.order1{
    order: 2;
}
.order2{
    order: 1;
}
/*saiji*/
#saiji .textbox h3{
    display: flex;
    align-items: flex-end;
    border-bottom:#f9cdc0 1px dashed;
}

#saiji .textbox h3::before{
    content: "";
    background-image:url(../img/icon_kitsune_syu.png);
    background-repeat: no-repeat;
    background-size: contain;
    width:30px;
    height:48px;
    margin-right:0.5em;
    display: inline-block;
}
#saiji .textbox h3 span{
    display: block;
    font-size: 0.8em;
}

.saijibox{
    margin:1em
}
.saijibox > div{
    width:100%;
    max-width:250px;
    text-align: right;
}
.saijibox img{
    width:100%;
    }
.sub-img{
    display: flex;
    flex-wrap: wrap;
      gap: 4px;
    min-height:180px;
    width:100%;
    margin:0 auto 1em;
}
.sub-img img{
    flex: 1;
      max-width: calc((100% - 8px) / 3);
      height: auto;
    min-height:180px;
    object-fit: cover;
}
.main-img{
    display: block;
}

.main-img-sp{
        display: none;
    }
@media (max-width: 520px) {
    .main-img{
        display: none;
    }
    .main-img-sp{
        display: block;
    }
    .sub-img img{
    flex: 1;
      max-width: calc((100% - 4px) / 2);
      height: 180px;
}
    #saiji .textbox h3.sp-kaigyo{
    display: flex;
    flex-wrap: wrap
}
}


/*photoalbum*/
.photoalbum > div{
    text-align: center;
    padding:1em;
}
.photoalbum{
    padding:1em;
    border-bottom: thin #999 dotted;
}
.photoalbum:last-child{
    border-bottom: none;
}
.thumbnail img{
    height:150px;
    object-fit: cover;
}
.photoalbum h4 a{
    font-size: 2rem;
    color:#252525;
    font-weight: lighter;
}
@media (max-width: 520px) {
    .photoalbum > div{
    text-align: center;
    padding:0em;
}
}

/*access*/
.access{
    width:98%;
    max-width:800px;
    margin:0 auto;
}
.map_img{
    border: thin solid #f9cdc0;
    background: #fff;
    box-shadow: 1px 1px 5px #999;
    margin-bottom:2em;
    padding:1em
}
.access img{
    width:100%;
    max-width:800px;
}

.access iframe{
    width:100%;
    max-width:800px;
}
.adressbox{
    width:100%;
    max-width:800px;
    margin:0 auto 1em;
    padding-bottom:2.5em;
    padding-left:2em;
}
.adressbox span{
    display: inline-block;
}
.adressbox h4{
    margin-bottom:1em;
}

/*gokigan*/
.gokiganblock h3{
    font-size: 2.5rem;
    font-weight: lighter;
    padding:0.5em;
    border-left:5px solid #e95024;
    margin-bottom:0.5em
}

.gokiganblock{
    padding:2em 0;
}
.gokiganblock:first-of-type{
    padding:0 0 2em 0;
}

.blockbox h4{
    writing-mode: vertical-rl;
    font-size: 1.8em;
    font-weight: lighter;
    position: absolute;
    right:0.5em;
    top:0.5em;
    color: #fff;
    text-shadow: 1px 1px 5px #333;
}
.blockbox{
    background-size: cover;
    width:300px;
    height: 300px;
    aspect-ratio: 1 / 1;
    position: relative;
    transition : 1s;
}
.blockbox:hover{
    display: block;
    opacity: 0.7;
    transition : 1s;
}
.gokiganblock a.btn_close{
    pointer-events: none
}
.gokiganblock a.btn_close .blockbox::after{
    content: "準備中";
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(25,25,25,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; 
    font-size: 1.2em; 
}

.blockbox.kekkon{
    background-image:url(../img/img_gokigan_kekkon.jpg);
}
.blockbox.yakuyoke{
    background-image:url(../img/img_gokigan_yaku.jpg);
}
.blockbox.shitigosan{
    background-image:url(../img/img_gokigan_753.jpg);
}
.blockbox.jitin{
    background-image:url(../img/img_gokigan_jitin.jpg);
}
.blockbox.iebarai{
    background-image:url(../img/img_gokigan_iebarai.jpg);
}
@media (max-width: 768px) {
    .blockbox{
    background-size: cover;
    width:90%;
    max-width:600px;
    height: 200px;
    aspect-ratio:inherit;
    margin:0 auto;
}
}

/*jinsei*/
.tabs {
      display: flex;
      cursor: pointer;
    border-bottom: 1px solid #ccc;
    }
    .tab {
      padding: 10px 20px;
      background: #eee;
      border: 1px solid #ccc;
      border-bottom: none;
    }
    .tab.active {
      background: white;
      font-weight: bold;
        border-bottom: 1px solid #e95024;
    }
    .tab-content {
      display: none;
      
      padding: 20px;
      background: white;
    }
    .tab-content.active {
      display: block;
    }
.plan753{
    background:#fff;
    padding:clamp(0.5em,2vw,2em);
}
.textbox.plan753 .cBox{
    margin:0;
}
.kakomi{
    padding:clamp(1em,2vw,2em);
    border:thin #f9cdc0 solid;
    background-color: #fff;
    background-image: url(../img/bg_753_annai.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom:1em;
}
.annnai_img{
    width:98%;
    max-width:758px;
    border:thin solid #e95024;
    margin:0 auto 1em;
    padding:1em;
}
.annnai_img img{
    width:100%;
}

.applyBox{
    background: url(../img/bg_moushikomi.jpg) no-repeat;
    background-position: center center;
    background-size:cover;
    padding:2em;
}
.applyBox p{
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    text-align: center;
    text-shadow: 1px 1px 5px #fff;
}
.applyBox p span{
    display: inline-block;
}
p.apply_tel{
    font-size: 1.6em;
}
p.apply_tel span{
    font-size:36px;
    color:darkred
}

/*juyohin*/
.juyohinbox{
    padding:2em;
    background-image: url(../img/bg_juyohin.jpg);
}
.juyohinbox-inner{
    display: flex;
    align-items:center;
    flex-direction:row-reverse;
    justify-content: center;
    padding:1em;
    background-color:rgba(255,255,255,0.75);
}
.juyohin-text{
    display: flex;
    align-items: flex-start;
    flex-direction:row-reverse;
    justify-content: center;
    padding:1em;
}

#juyohin h3.juyohin-h{
    font-size: 1.6em;
    display: flex;
    border:none;
    writing-mode: vertical-rl;
}
#juyohin h3.juyohin-h:before{
    content: "";
    background-image:url(../img/juyo/icon_juyohin.png);
    background-repeat: no-repeat;
    width:30px;
    height:30px;
    margin-bottom:0.3em;
}

.juyohinbox .text{
    display: flex;
    align-items: flex-start;
    flex-direction:row-reverse;
    justify-content: center;
    padding:1em;
}
.juyohinbox .text p{
    font-size: 1.1em;
    max-height:500px;
    padding: 0 1em 1em 1em;
    display: inline-block;
    writing-mode: vertical-rl;
}
.juyohinbox .text-h{
    display: flex;
    align-items: flex-start;
    flex-direction:row-reverse;
    justify-content: center;
    padding:1em;
}
.juyohinbox .text-h p{
    font-size: 1.1em;
    max-height:280px;
    padding: 0 1em 1em 1em;
    writing-mode: vertical-rl;
    margin: 0 auto;
}

.juyohinbox .text span.juyo-title{
    display: block;
    font-size:1.1em;
    padding:0 1em 0 0.5em;
    writing-mode: vertical-rl;
}
.juyohinbox .text p.goshuin-text{
    font-size: 1.1em;
    max-height:540px;
    padding: 0;
    writing-mode: vertical-rl;
}


.juyohinbox .juyohinimg{
    width:100%;
    max-width:400px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.juyohinbox .juyohinimg img{
    width:100%;
    height: 250px;
    object-fit: contain;
    overflow: hidden;
}
.juyohinbox .juyohinimg-yoko img{
    width:100%;
    height: 200px;
    object-fit: contain;
    overflow: hidden;
}


@media (max-width: 768px) {
.juyohin-text{
    display: flex;
    align-items: center;
    flex-direction:column;
    justify-content: center;
    padding:1em;
    width:98%;
    margin:0 auto;
}

.juyohinbox-inner{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction:column;
    justify-content: center;
    padding:1em;
    background-color:rgba(255,255,255,0.75);
}
    .juyohinbox .text{
    display: flex;
    align-items: center;
    flex-direction:column;
    justify-content: center;
    padding:1em;
    height: 400px;
}
    .juyohinbox .text p.goshuin-text{
        height: 420px;
        padding:1em 0;
    }
}

/*境内マップ*/
#map-container {
      max-width: 800px;
      margin: auto;
      background: white;
      padding: 1rem;
      box-shadow: 0 0 10px #ccc;
    }
    svg {
      width: 100%;
      height: auto;
    }
    #modal-bg {
      display: none;
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 999;
    }
    #modal {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
        background-image: url(../img/keidai/bg_modal.jpg);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  max-width: 650px;
  width: 90%;
  z-index: 1000;
  max-height: 80vh; /* ← 高さ制限 */
  overflow: hidden;  /* ← はみ出し防止 */
}
#modal-content {
  overflow-y: auto;   /* ← スクロールを許可 */
  max-height: 60vh;   /* ← コンテンツの高さ制限 */
  padding-right: 0.5rem; /* スクロールバーの余白 */
}
    #modal-close {
      margin-top: 15px;
      background: #444;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
        margin:15px auto;
        display: block;
    }
    #modal-close:hover {
      background: #222;
    }
    .cls-1{
        cursor: pointer;
    }
.cls-1:hover{
    stroke:white;
    stroke-width:10px;
    filter: blur(10px);
    opacity: 1;
    /*transition: ease 0.5s;*/
}
#modal .popup h5{
    font-size:1.4em;
    text-align: center;
    margin-bottom: 1em;
}
#modal .popup img{
    display: block;
    margin:0 auto;
    width:100%;
    max-width:290px;
    margin-bottom: 1em;
}
#modal .popup img.wide{
    display: block;
    margin:0 auto;
    width:100%;
    max-width:400px;
    margin-bottom: 1em;
}
#modal .popup{
    line-height: 1.8
}

/*神道と文化*/
/*神道について*/
.small-txt{
    font-size:0.8em;
    display: inline-block;
}
.waku{
    border: 1px solid #999;
    padding:1em;
}
.vertical-list-horizontal-flow {
  border: 1px solid #eee;
  padding: 1em;
  display: flex;
  gap: 2rem;
    margin-bottom:2em;
    background-image: url(../img/bg_drawer.jpg)
}


.vertical-list-horizontal-flow ul {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* 横方向に流すリスト（縦書き） */
.vertical-list-horizontal-flow li {
  writing-mode: vertical-rl; /* 各項目が縦書き、上→下 */
  font-size: 1.1em;
  line-height: 2;
  list-style: none;
    letter-spacing: 0.2rem;
    padding:1em 0.5em;
}
.vertical-list-horizontal-flow li:hover{
    background-color:#f9cdc0;
}
.vertical-list-horizontal-flow li a{
    color: #252525;
}
.nav_shinto{
    padding:0.5em;
    border:thin solid #eee;
}
.nav_shinto:hover{
    background-color:#f9cdc0;
}
.shinto_pageflow{
    display: flex;
}

/*神棚について*/
#kamidana p img{
    display: block;
    margin:1em auto;
}
@media (max-width: 520px) {
    #kamidana p img{
    width:100%;
    height: auto;
}
}

/*お正月*/
.shoden_sanpai{
    background-image: url(../img/shinto/bg_modal.jpg);
    padding:2em
}
.shoden_sanpai .cBox{
    font-size: 1.1em;
    text-shadow: 1px 1px 5px #fff;
    padding:1em;
    width:95%;
    margin:0 auto;
}
.shoden_sanpai .cBox h5{
    font-size: 1.1em;
    font-weight: lighter;
    margin-top:1em;
}

/*枠飾り*/
.fancy-box {
  position: relative;
  padding: 1em;
  margin: 1rem;
  border: 1px solid transparent; /* optional */
}

/* 共通の角飾りスタイル */
.corner {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: gold;
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background-color: gold;
}

/* 左上の飾り */
.top-left {
  top: 0;
  left: 0;
}

.top-left::before {
  width: 200px;
  height: 2px;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.top-left::after {
  width: 2px;
  height: 100px;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

/* 右下の飾り */
.bottom-right {
  bottom: 0;
  right: 0;
}

.bottom-right::before {
  width: 200px;
  height: 2px;
  bottom: 50%;
  right: 100%;
  transform: translateY(50%);
}

.bottom-right::after {
  width: 2px;
  height: 100px;
  right: 50%;
  bottom: 100%;
  transform: translateX(50%);
}

/*750周年事業*/
#jinja750th h2.title-jinja750th{
 text-align: center;
}
#jinja750th h2.title-jinja750th img{
   width:50%;
    max-width:220px;
}
#jinja750th h3{
    padding:0.5em 0;
    display: flex;
    align-items: center;
    font-size: 1.6em
}
#jinja750th h3::before{
    content: "";
    background-image:url(../img/icon_ryu_beta.png);
    background-repeat: no-repeat;
    background-size: contain;
    width:30px;
    height:48px;
    margin-right:0.5em;
}
#jinja750th h4{
    padding:0.5em 0;
    font-size: 1.2em;
    margin-left:1em;
}
#jinja750th p{
    margin-left:2em;
    padding-right:2em;
}

/*杉並区馬橋の歴史*/
.blockbox h4.history{
    writing-mode: vertical-lr;
    font-size:clamp(1.4em,2.5vw,1.8em);
    font-weight: lighter;
    position: absolute;
    right: inherit;
    left:0.5em;
    top:0.5em;
    color: #fff;
    text-shadow: 1px 1px 5px #333;
    background-color: rgba(25,25,25,0.7);
    padding:0.5rem
}
.blockbox.mabashimura{
    background-image:url(../img/history/img_mabashimura01.jpg);
}
.blockbox.meiji{
    background-image:url(../img/history/img_meiji01.jpg);
}
.blockbox.taisho{
    background-image:url(../img/history/img_taisho01.jpg);
}
.fRed{color:red;}

p img.right-side{
    margin:1em 0 1em 1em;
    float: right;
}
p img.right-side::after{
    clear: both;
}

.textbox h5{
    font-size:1.1em;
    padding:1em 2em 0.5em 0;
    margin-bottom:0.5em;
    border-bottom: thin solid #333;
    text-align: left;
}
@media (max-width: 768px) {
.blockbox h4.history{
    writing-mode: inherit;
    font-weight: lighter;
    position: absolute;
    right: inherit;
    top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 5px #333;
    background-color: rgba(25,25,25,0.7);
    padding:0.5rem;
}
    p img.right-side{
    margin:1em auto;
     width:100%;
    float: inherit;
    display: block;
}
}

/*氏子青年会*/
.ujisei-menu ul{
    display: flex;
    justify-content: space-between;
}
.ujisei-menu li{
    flex:1;
    list-style: none;
}
.ujisei-menu li a{
    display: block;
    width:100%;
    padding:0.5em;
    background-color: #fcede8;
    border:thin #f9cdc0 solid;
    text-align: center;
}
.ujisei-menu li a:hover{
    background-color: #f9cdc0;
}

h3.ujisei-title{
    font-size:1.6em;
    padding:0.5em 0 0.5em 0.5em;
    border-left:5px solid #e95024;
    margin:0.5em 0;
}
p.photo-tile{
    display: flex;
    width:100%;
    max-width:650px;
    margin:0 auto;
    padding:0;
    flex-wrap: wrap;
}
p.photo-tile img{
    flex:1;
    width:auto;
    max-width:128px;
    height:100px;
    object-fit: cover;
    margin:1px;
}
p.photo-tile img.wide_img{
    flex:1;
    width:100%;
    max-width:inherit;
    height:150px;
    object-fit: cover;
    margin:1px;
}

#ujisei p.sp-nenpyo-caution{
    display: none;
}
#ujisei td p{
    text-align: left;
}
#ujisei td p span{
    display: inline-block;
}
@media (max-width: 520px) {
    #ujisei p.sp-nenpyo-caution{
    display: block;
    font-family: sans-serif;
    font-size:0.9em;
    color:orange;
    }
    .sahou-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2em;
}
.sahou-img img{
    flex:1;
    max-width:240px;
    margin:0.3em auto;
    display: block;
    width:80%;
}
    
}
/*手水・参拝の作法*/
.sahou-img{
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
}
.sahou-img img{
    flex:1;
    max-width:240px;
    margin:0.3em;
}
@media (max-width: 520px) {
    
    .sahou-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2em;
}
.sahou-img img{
    flex:1;
    max-width:240px;
    margin:0.3em auto;
    display: block;
    width:80%;
}
}

/* Responsive */
@media (max-width: 768px) {
    .second .container {
    display: flex;
    flex-direction: column;
  }
    .second .container h2{
    padding:1em 1em 1em 0.6em;
}
    .second .container h2 span{
        display: inline-block
    }
    .second .container h3 span{
        display: inline-block
    }
    .second .container h5 span{
        display: inline-block
    }
.tategaki-textbox{
    writing-mode:inherit;
    margin-left:1em;
    margin-bottom:1em
}
    .textbox .cBox{
    margin:0.5em;
}
    .textbox p{
        max-height:inherit;
        width:100%;
        padding:0.5em 0.5em 1em;
}
    .imgbox {
    flex:inherit;
    max-height: 540px;
    overflow: hidden;
  }
    .imgbox img {
    flex: unset;
    height: inherit;
    max-height: 270px;
    object-fit: cover;
  }
    #saiji .imgbox img {
    flex: unset;
    height: 360px;
    object-fit: cover;
    object-position: center 70%;
  }
    #saiji .imgbox img.bottom-set {
    flex: unset;
    height: 360px;
    object-fit: cover;
    object-position: center bottom;
  }
  .order2 {
    order: 2;
  }
  .order1 {
    order: 1;
  }
    .saijibox{
    margin:1em 0;
}
    .saijibox > div{
    margin:0 auto;
}
    #modal {
  overflow: scroll;
}
    .juyohinbox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin:0 auto;
}
    
    
.shoden_sanpai .cBox{
    margin-left:0px;
}
.shoden_sanpai .cBox h5{
    font-size: 1.1em;
    font-weight: lighter;
    margin-top:1em;
}
    
    .vertical-list-horizontal-flow ul {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
    .vertical-list-horizontal-flow li {
  writing-mode: vertical-rl; /* 各項目が縦書き、上→下 */
  font-size: 1.1em;
  line-height: 1;
  list-style: none;
    letter-spacing: 0.2rem;
    padding:1em 0.5em;
}
    
    .ujisei-menu ul{
    display: flex;
    justify-content: space-between;
        flex-wrap: wrap;
}
.ujisei-menu li{
    flex:inherit;
    width: 50%;
    list-style: none;
}
    #ujisei .tabs {
    display: flex;
    flex-direction: column;
}
    

}

@media (max-width: 520px) {
.vertical-list-horizontal-flow ul {
  gap: 0rem;
}
    .juyohinbox .text-h{
        width:100%;
        margin:0 auto;
        line-height: 2;
    }
}

.reitaisaiBox{
    width:98%;
    margin:0 auto;
}
#reitaisai h3{
    font-size: 1.3em;
    padding-bottom:0.5em;
    border-bottom:thin #ededed solid;
    margin-bottom:0.5em;
}
.photo{
    flex-wrap: wrap;
}
.photo > div {
    margin: 0.1em;
    width:320px;
}
.photo > div img{
    width:100%;
}

@media (max-width: 768px) {
    .photo > div {
    margin: 0.1em auto;
}
}

/*上に戻るボタン*/
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #f9cdc0;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    padding-top:10px;
    line-height: 1;
    color:#666;
    font-size:1.2em
}
.scroll-top-btn img{
    width:35px;
    height: auto;
}
.scroll-top-btn.show {
  opacity: 1;
pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  transform: translateY(-5px);
  animation: floaty-pulse 0.5s infinite alternate;
}
@media (max-width: 768px) {
    .scroll-top-btn {
  position: fixed;
  bottom: 100px;
  right: 15px;
  width: 50px;
  height: 50px;
    padding-top:5px;
}
    .scroll-top-btn img{
    width:25px;
    height: auto;
}
}