@charset "UTF-8";

/* 全体 */
html {
  font-family: "Noto Serif JP", sans-serif;
  letter-spacing: 0.2em;
  color: #000000;
  font-size: 24px;
  text-align: justify;
  line-height: 1.5;
  scroll-behavior: smooth;
}

@media (max-width: 1200px) {
  html{
    letter-spacing: 0.1em;
  }
  
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  height: 160px;
  margin: 0 auto 80px; /* 左右中央寄せ */
}

.header .logo img {
  width: 120px;
  height: 120px;
  margin: 20px 0 0 40px;
}

/* ハンバーガーメニュー */
.hamburger {
  position: fixed;
  top: 0px;
  /* 中央(50%)から1200px/2(=600px)右にずらす。さらにボタン幅分引く */
  left: calc(50% + 600px - 120px); 
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2001; /* ← 最前面に出す */

  /* 追加：背景に白の半透明を敷く */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px); /* 対応ブラウザなら背景をぼかして高級感UP */
}

.hamburger span {
  display: block;
  width: 60px;
  height: 1px;
  background: black;
  margin: 10px 0;
  transition: 0.3s ease;
}

/* スライドメニュー（上からスライドイン） */
.slide-menu {
  position: fixed;
  top: -654px;  /* ← 高さと同じ値に */
  left: 0;
  width: 100%;
  height: 654px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px); /* 対応ブラウザなら背景をぼかして高級感UP */
  transition: 0.5s ease;
  z-index: 100;
}

/* メニュー内ロゴ */
.menu-logo {
  max-width: 1200px;
  margin: 0 auto;
}
.menu-logo img {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 40px;
  margin-bottom: 60px;  /* ロゴと文字の間隔 */
}

/* メニュー本体 */
.menuText {
  width: 534px;
  margin: 0 auto;
}

.menuText ul {
  writing-mode: vertical-rl;   /* 縦書き */
  text-align: center;
  color: white;
  font-size: 28px;
  width: 534px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
  

/* ハンバーガー開閉アニメーション */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
}

.hamburger.active span {
  background: white;
}

.hamburger.active {
  background: none;
}

/* メニュー表示 */
.slide-menu.active {
  top: 0;
}

/* モバイル版 */
@media (max-width: 1200px) {
   .header {
    width: 375px;
    height: 72px;
    margin: 0 auto 0;
  }
  .header .logo img {
    width: 40px;
    height: 40px;
    margin: 16px;
  }
  .hamburger {
    width: 72px;
    height: 72px;
    left: calc(50% + 187.5px - 72px); /* 375px/2=187.5 */
  }
  .hamburger span {
    width: 40px;
    height: 1px;
    margin: 6px 0;
  }
  /* スライドメニュー（上からスライドイン） */
.slide-menu {
  top: -364px;   /* ← 高さと同じ値に */
  height: 364px;
}

  /* メニュー内ロゴ */
  .menu-logo img {
    width: 40px;
    height: 40px;
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 44px;  /* ロゴと文字の間隔 */
  }
  /* メニュー本体 */
  .menuText {
    width: 200px;
  }
  .menuText ul {
    font-size: 18px;
    width: 200px;
  }
}


/* トップ画像・寺名 */
.top {
  max-width: 1200px;
  display: flex;
  margin: 0 auto 240px;
}
.top p {
  writing-mode: vertical-rl;
  font-size: 40px;
  font-weight: bold;
  margin-left: 70px;
  margin-right: 70px;
}
.top p span {
  font-size: 60px;
  margin-top: 24px;
}
.top img {
  width: 970px;
  margin-right: 0;
}

@media (max-width: 1200px) {
  .top {
    max-width: 375px;
    position: relative;
  }
  .top p {

    writing-mode: vertical-rl;
    margin: 0 auto;
    color: #FFFFFF;
    text-shadow: 0 0 5px #000000;
    position: absolute;
    top: 50%;     /* 上から50% */
    left: 50%;    /* 左から50% */
    transform: translate(-50%, -50%); /* 要素自身の幅・高さ分を打ち消す */
    width: auto;
    white-space: nowrap;  /* 強制的に1行にする */
  }

  .top img {
    width: 375px;
  }

}

/* 常光寺について */
.jyokoji {
  max-width: 1200px;
  height: 400px;
  margin: 0 auto 240px;
  display: flex;
}
.jyokoji img {
  width: 687px;
  margin-left: 0;
}
.jyokojiTxt {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px;
  margin-left: 105px;
}

h1 {
  writing-mode: vertical-rl;
  font-size: 28px;
  margin-left: 48px;
  text-align: center;
}

.jyokoji p {
  writing-mode: vertical-rl;
  font-size: 18px;
  margin-left: 80px;
}

.view {
  writing-mode: vertical-rl;
  font-size: 20px;
  text-align: end;
}

@media (max-width: 1200px) {
  .jyokoji {
    max-width: 375px;
    height: auto;
    margin: 0 auto 80px;
    display: block;
    padding: 0 28px;
  }
  .jyokoji img {
    width: 315px;
    margin: 0 auto 40px;
  }
  .jyokojiTxt {
    display: block;
    flex-direction: row;
    padding: 0;
    margin-left: 0;
  }
  h1 {
    writing-mode: horizontal-tb;
    font-size: 20px;
    margin-left: 0px;
    text-align: left;
  }
  .jyokoji p {
    writing-mode: horizontal-tb;
    font-size: 16px;
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 36px;
  }
  .view {
    writing-mode: horizontal-tb;
    font-size: 14px;
    text-align: end;
  }
}



/* 仏事豆知識 */
.trivia {
  max-width: 1200px;
  height: 400px;
  margin: 0 auto 240px;
  display: flex;
  flex-direction: row-reverse;
}
.trivia img {
  width: 687px;
  margin-right: 0;
  margin-left: 65px;
}
.triviaTxt {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px;
  margin-left: 105px;
}

.trivia p {
  writing-mode: vertical-rl;
  font-size: 18px;
  margin-left: 80px;
}

@media (max-width: 1200px) {
  .trivia {
    max-width: 375px;
    height: auto;
    margin: 0 auto 80px;
    display: block;
    flex-direction: row;
    padding: 0 28px;
  }
  .trivia img {
    width: 315px;
    margin-left: 0;
    margin-bottom: 40px;
  }
  .triviaTxt {
    display: block;
    flex-direction: row;
    padding: 0;
    margin-left: 0;
  }
  .trivia p {
    writing-mode: horizontal-tb;
    font-size: 16px;
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 36px;
  }
  .brPc {
    display: none;
  }
}



/* アクセス */
.access {
  max-width: 1200px;
  height: 400px;
  margin: 0 auto 240px;
  display: flex;
}
.accessTxt {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px;
  margin-left: 60px;
}
.access p {
  writing-mode: vertical-rl;
  font-size: 22px;
  margin-left: 20px;
}
.access iframe {
  width: 490px;
  height: 400px;
  margin-left: 160px;
}
.pTxt {
  writing-mode: vertical-rl;
  font-size: 18px;
  margin-left: 48px;
  padding-top: 20px;
}
.pNotice {
  writing-mode: vertical-rl;
  font-size: 16px;
  margin-left: 48px;
  padding-top: 20px;
}

@media (max-width: 1200px) {
  .access {
    max-width: 375px;
    height: auto;
    margin: 0 auto 120px;
    display: block;
    padding: 0 28px;
  }
  .accessTxt {
    display: block;
    flex-direction: row;
    padding: 0;
    margin-left: 0px;
  }
  .access p {
    writing-mode: horizontal-tb;
    font-size: 16px;
    margin-left: 0;
    margin-top: 20px;
  }
  .access iframe {
    width: 315px;
    height: 220px;
    margin: 0 auto 40px;
  }
  .pTxt {
    writing-mode: horizontal-tb;
    font-size: 14px;
    margin-left: 0px;
    padding-top: 12px;
  }
  .pNotice {
    writing-mode: horizontal-tb;
    font-size: 14px;
    margin-left: 0px;
    padding-top: 20px;
  }
}


/* フッター */
footer {
  max-width: 1200px;
  height: 526px;
  margin: 0 auto;
  background-color: #000000;
  color: #FFFFFF;
  padding: 80px 120px 0;
}
.footer-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.footerMenu ul {
  width: 260px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.footerMenu ul li {
  writing-mode: vertical-rl;
  font-size: 20px;
}

.footerAdd {
  writing-mode: vertical-rl;
  height: 323px;
}
.footerAdd p {
  font-size: 36px;
  font-weight: bold;
  margin-left: 40px;
}
.footerAdd span {
  font-size: 20px;
  margin-bottom: 12px;
}

.add {
  font-size: 16px;
  margin-left: 40px;
}
.tel {
  font-size: 16px;
  margin-left: 80px;
}
.footerLine {
  background-color: #FFFFFF;
  width:1px;
  height:323px;
}
.visit {
  font-size: 14px;
  margin-right: 80px;
}

.copy {
  font-size: 14px;
  text-align: center;
  margin-top: 80px;
}

@media (max-width: 1200px) {
  footer {
  max-width: 375px;
  height: auto;
  margin: 0 auto;
  padding: 52px 40px 20px;
}
.footer-content {
  display: block;
  flex-direction: row;
  justify-content: flex-start;
  width: 295px;
}
.footerMenu ul {
  width: 215px;
  margin: 0 auto 80px;
}
.footerMenu ul li {
  font-size: 16px;
}

.footerAdd {
  writing-mode: horizontal-tb;
  height: auto;
}
.footerAdd p {
  font-size: 24px;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 12px;
}
.footerAdd span {
  font-size: 18px;
  margin-bottom: 0;
  margin-right: 12px;
}
.add {
  font-size: 14px;
  margin-left: 0;
  margin-bottom: 12px;
}
.tel {
  font-size: 14px;
  margin-left: 0;
  margin-bottom: 36px;
}
.footerLine {
  background-color: #FFFFFF;
  width:295px;
  height:1px;
}
.visit {
  font-size: 12px;
  margin-right: 0;
  margin-top: 36px;
}
.copy {
  font-size: 12px;
  text-align: center;
  margin-top: 40px;
}
}

/* 常光寺についてページ */

.Jtop {
  max-width: 1200px;
  margin: 80px auto 240px;
  text-align: center;
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}

h2 {
  writing-mode: vertical-rl;
  font-size: 36px;
}

@media (max-width: 1200px) {
  .Jtop {
    max-width: 375px;
    margin: 120px auto 120px;
  }
}


/* セクション1（正式名称・創建） */
.Jsc01 {
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center; /* 縦方向の中央揃え */
}
.Jsc01 img {
  width: 455px;
  height: 366px;
  margin-right: 0;
  margin-left: 84px;
}
.Jsc_text {
  width: 500px;
  font-size: 18px;
  line-height: 1.6;
}

h3 {
  font-size: 28px;
}
.h3Line {
  background-color: #000000;
  width:500px;
  height:1px;
  margin-top: 4px;
  margin-bottom: 16px;
}

.meisyo {
  font-size: 32px;
  margin-bottom: 20px;
}
.Jsc01_text01 {
  margin-bottom: 60px;
}

@media (max-width: 1200px) {
  .Jsc01 {
  max-width: 375px;
  margin: 0 0 120px;
  display: block;
  flex-direction: row-reverse;
  align-items: stretch;
}
.Jsc01 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px 60px;
}
.Jsc_text {
  width: 315px;
  margin: 0 auto;
  font-size: 14px;
}

h3 {
  font-size: 20px;
}
.h3Line {
  background-color: #000000;
  width:315px;
  height:1px;
}

.meisyo {
  font-size: 24px;
  margin-bottom: 20px;
}
.Jsc01_text01 {
  margin-bottom: 40px;
}
}


/* セクション2（宗派） */
.Jsc02{
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row;
  align-items: center; /* 縦方向の中央揃え */
}

.Jsc02 img {
  width: 455px;
  height: 659px;
  margin-left: 0;
  margin-right: 84px;
}

.Jsc02_text01 {
  margin-bottom: 40px;
}

.Jsc02_text02 div {
  font-size: 28px;
  margin-bottom: 18px;
}
.Jsc02_text02 div span {
  font-size: 20px;
  font-weight: normal;
}

@media (max-width: 1200px) {
  .Jsc02{
  max-width: 375px;
  margin: 0 auto 120px;
  display: block;
  flex-direction: row;
  align-items: stretch;
}
.Jsc02 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px;
}
.Jsc02_text02 div {
  font-size: 20px;
  margin-bottom: 8px;
}
.Jsc02_text02 div span {
  font-size: 12px;
  font-weight: normal;
}
}


/* セクション3（本尊・教義） */
.Jsc03 {
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center; /* 縦方向の中央揃え */
}

.Jsc03 img {
  width: 455px;
  height: 393px;
  margin-right: 0;
  margin-left: 84px;
}

.Jsc03_text01 {
  margin-bottom: 60px;
}

@media (max-width: 1200px) {
  .Jsc03 {
  max-width: 375px;
  margin: 0 auto 120px;
  display: block;
  flex-direction: row-reverse;
  align-items: stretch;
}
.Jsc03 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px 60px;
}
.Jsc03_text01 {
  margin-bottom: 40px;
}

}

/* セクション4（建築物） */
.Jsc04{
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row;
  align-items: center; /* 縦方向の中央揃え */
}

.Jsc04 img {
  width: 455px;
  height: 341px;
  margin-left: 0;
  margin-right: 84px;
}

@media (max-width: 1200px) {
.Jsc04{
  max-width: 375px;
  margin: 0 auto 120px;
  display: block;
  flex-direction: row;
  align-items: stretch;
}
.Jsc04 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px;
}
}

/* セクション5（目つぶしの龍） */
.Jsc05 {
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center; /* 縦方向の中央揃え */
}
.Jsc05_img {
  width: 455px;
  height: 708px;
  margin-right: 0;
  margin-left: 84px;
}
.Jsc05_img picture {
  display: block;       /* インライン要素の隙間をなくすために block に */
  margin-bottom: 60px;  /* 下に60pxの余白を追加 */
}

.Jsc05_img picture:last-child {
  margin-bottom: 0;     /* 最後の画像だけ余白を消す */
}

@media (max-width: 1200px) {
  .Jsc05 {
    max-width: 375px;
    margin: 0 auto 120px;
    display: block;
    flex-direction: row-reverse;
    align-items: stretch;
  }
  .Jsc05_img {
    width: 315px;
    height: 220px;
    margin: 0 0 20px 60px;
  }

  .Jsc05_img picture {
    margin-bottom: 0;  
  }

  /* 1枚目の画像を非表示にする */
  .Jsc05_img picture:first-child {
    display: none;
  }
}


/* セクション6（常光寺沼） */
.Jsc06{
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row;
  align-items: center; /* 縦方向の中央揃え */
}
.Jsc06 img {
  width: 455px;
  height: 366px;
  margin-left: 0;
  margin-right: 84px;
}
@media (max-width: 1200px) {
.Jsc06{
  max-width: 375px;
  margin: 0 auto 120px;
  display: block;
  flex-direction: row;
  align-items: stretch;
}
.Jsc06 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px;
}
}

/* セクション7（墓地） */
.Jsc07 {
  max-width: 1200px;
  margin: 0 auto 160px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center; /* 縦方向の中央揃え */
}

.Jsc07 img {
  width: 455px;
  height: 324px;
  margin-right: 0;
  margin-left: 84px;
}
@media (max-width: 1200px) {
  .Jsc07 {
  max-width: 375px;
  margin: 0 auto 120px;
  display: block;
  flex-direction: row-reverse;
  align-items: stretch;
}
.Jsc07 img {
  width: 315px;
  height: 220px;
  margin: 0 0 20px 60px;
}
}



/* 仏事豆知識 */
.Mtop {
  max-width: 1200px;
  margin: 80px auto 240px;
  text-align: center;
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}
@media (max-width: 1200px) {
  .Mtop {
    max-width: 375px;
    margin: 120px auto 120px;
  }
}


.accordion {
    border: 1px solid #ccc;
    max-width: 800px;
    margin: 0 auto 160px;
  }
  .accordion-item {
    border-bottom: 1px solid #ddd;
  }

  /* 共通ボタン */
  .accordion-button {
    background: #000000;
    color: #FFFFFF;
    width: 100%;
    text-align: left;
    padding: 20px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    position: relative;
  }

  /* 矢印（∨アイコンを疑似要素で追加） */
.accordion-button::after {
  content: "∨";
  position: absolute;
  right: 24px;
  transition: transform 0.3s;
  font-size: 14px;
  transform: scaleX(2); /* 横長に */
  color: #fff; /* 矢印の色 */
}
/* 開いているとき：上向き∧を横長に */
.accordion-button.active::after {
  transform: scaleX(2) rotate(180deg);
}

  .accordion-button:hover {
    background: #333333;
  }
  .accordion-content {
    display: none;
    background: #fafafa;
    padding: 28px 32px 40px;
  }

  /* サブメニュー */
  .sub-accordion .accordion-button {
    background: #777777;
    font-size: 18px;
    padding-left: 20px;
  }
  .sub-accordion .accordion-button:hover {
    background: #888888;
  }
  .sub-accordion .accordion-content {
    background: #f9f9f9;
    font-size: 16px;
  }

  /* スマホ対応 */
@media (max-width: 1200px) {
  .accordion {
    border: 1px solid #ccc;
    max-width: 340px;
    margin: 0 auto 120px;
  }

  /* 共通ボタン */
  .accordion-button {
    font-size: 18px;
    padding: 18px;
  }

  .accordion-content {
    display: none;
    background: #fafafa;
    padding: 16px 16px 40px;
  }

  /* サブメニュー */
  .sub-accordion .accordion-button {
    font-size: 16px;
  }
}

  /* お問い合わせ */
  .Ctop {
  max-width: 1200px;
  margin: 80px auto 240px;
  text-align: center;
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}
@media (max-width: 1200px) {
  .Ctop {
    max-width: 375px;
    margin: 120px auto 120px;
  }
}

.Ccontent {
  max-width: 800px;
  margin: 0 auto 240px;
  font-size: 18px;
  text-align: center;
}

.Ccontent div {
  margin-top: 80px;
}

@media (max-width: 1200px) {
  .Ccontent {
  max-width: 300px;
  margin: 0 auto 240px;
  font-size: 16px;
  text-align: center;
}
}