@charset "utf-8";
/* CSS Document */
#location {background-image: url("/wp-content/themes/original-child/assets/img/bg2.png");background-repeat: repeat;}
#location * {color: #000;}

#S01 {
  padding: 0 0 clamp(2em, 6.4vw, 4em);
}
#S01 * {color: #000;}
#S02 {
  padding: 0 0 clamp(2em, 6.4vw, 4em);
}
#S03 {
  padding: 0 0 clamp(2em, 6.4vw, 4em);
}
#S04 {
  padding: clamp(2em, 6.4vw, 4em) 0;
}
#S05 {
  padding: clamp(2em, 6.4vw, 4em) 0;
  }
#S01 .contents:nth-child(1) .contentsDetail {
  max-width: inherit;
}
#S01 .contents:nth-child(1) .contentsDetail img {
  width: 100%;
}
#bOmiya {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  justify-content: center;
}
#bOmiya .textBox {
  position: absolute;
  max-width: 40%;
  padding: 0 0 clamp(0.25em, 9vw, 10em);
  bottom: 0;
}
#bOmiya h2 {
  text-align: left;
  line-height: 2em;
}
#bOmiya p {
  text-align: left;
}
#areaValue .leftBox {
  width: 480px;
}
#areaValue .rightBox {
  flex: 1;
  background: #052003;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1em, 4.8vw, 4em);
}
#areaValue h2 {
  font-size: calc(var(--text-h2) * 1.8);
  color: #fff;
}
#areaValue h2 span {
  font-size: calc(var(--text-h2) * 0.8);
  color: #fff;
}
#areaValue h3 {
  color: #fff;
  text-align: left;
}
#areaValue p {
  color: #fff;
  text-align: left;
}
#temple {
  column-gap: 20px;
  padding: 0 0 2em;
}
#temple .leftBox {
  flex: 1;
}
#temple .rightBox {
  width: 500px;
}
#temple h3 {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 0;
}
#temple h3 small {
  display: block;
  font-size: calc(var(--text-h3) * 0.8);
  padding: 0 0 10px;
  line-height: 1.4em;
}
#temple p {
  text-align: left;
}
#temple .minit {
  font-size: calc(var(--text-body) * 1.0);
  background: #222;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  line-height: 1.4em;
  text-align: center;
  font-size: calc(var(--text-body) * 0.8);
}
#eventBox {
  background: #dddcd6;
  padding: clamp(2em, 4.8vw, 3em) clamp(1em, 3.2vw, 2em);
}
#eventBox ul {}
#eventBox ul li {}
#eventBox ul li h4 {
  background: #fff;
  margin: 10px 0;
}
#eventBox ul li p {
  text-align: left;
}
#S03 h2 {
  margin: 1em 0;
}
#S03 ul {
  display: flex;
  flex-flow: wrap;
  gap: 30px;
  justify-content: center;
}
#S03 ul li {
  width: calc(100% / 3 - 20px);
}
#S03 ul li .textBox {
  display: flex;
  align-items: center;
}
#S03 ul li .textBox img {
  width: 100px;
  height: 100px;
}
#S03 ul li h4 small {
  font-size: calc(var(--text-h4) * 0.8);
}
#S03 ul li h4 .num {
  background: #920c1d;
  color: #fff;
  display: inline-block;
  padding: 7px;
  margin: 0 5px 0 0;
}
#S03 ul li .textBox p {
  flex: 1;
  text-align: left;
  padding: 15px;
}
#S04 h2 {
  font-size: calc(var(--text-h2) * 1.8);
  color: #9e937d;
}
#S04 h2 span {
  font-size: calc(var(--text-h2) * 0.8);
}
#S04 .detail h3 {
  font-size: calc(var(--text-h3) * 1.8);
  color: #9e937d;
}
#S04 h3 span {
  font-size: calc(var(--text-h3) * 0.8);
}
#S04 .detail {
  padding: clamp(1em, 3.2vw, 2em) 0;
}
#S04 .flexBox2 {
  padding: 0 0 3em;
}
#S04 .flexBox2 ul {
  display: flex;
  flex-flow: wrap;
}
#S04 .flexBox2 ul li {
  width: calc(100% / 2 - 20px);
}
#S04 .glidBox ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
/* 1段目：3列分使って2個並べる（3×2=6） */
#S04 .glidBox ul li:nth-child(-n+2) {
  grid-column: span 3;
}
/* 2段目：2列分使って3個並べる（2×3=6） */
#S04 .glidBox ul li:nth-child(n+3) {
  grid-column: span 2;
}
#S04 ul {
  counter-reset: my-number;
}
#S04 ul li {
  border: 1px solid #b5b5b5;
}
#S04 ul li h4 {
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--text-h4) * 0.9);
  padding: 10px;
}
#S04 ul li h4 .name {
  counter-increment: my-number;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
#S04 ul li h4 .name::before {
  content: counter(my-number) "";
  padding: 5px;
  display: inline-block;
  margin: 0 5px 0 0;
}
#S04 ul li h4 .minit {
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
#S04 #v01 ul li h4 .name::before, #S04 #v01 ul li h4 .minit {
  background: #de6954;
  color: #fff;
}
#S04 #v02 ul li h4 .name::before, #S04 #v02 ul li h4 .minit {
  background: #9e905a;
  color: #fff;
}
#S04 #v03 ul li h4 .name::before, #S04 #v03 ul li h4 .minit {
  background: #50753a;
  color: #fff;
}
#S05 .detail {
  padding: clamp(1em, 3.2vw, 2em) 0;
}
#S05 #area01 h3, #S05 #area02 h3 {
    margin: auto;
    padding: 10px;
    white-space: nowrap;
    max-width: 300px;
}
#S05 #area01 h3 {
  background: #b3a595;
  color: #fff;
}
#S05 #area02 {
  background: #b3a595;
}
#S05 #area02 h3 {
  background: #fff;
}
#S05 #area02 h4 {
  color: #fff;
}
#S05 #area02 p {
    color: #fff;
    padding: 1em;
}
#S05 ul {
  flex-flow: wrap;
  justify-content: center;
}
#S05 ul li {
  width: calc(100% / 4 - 20px);
}
#S05 ul li h4 {
  font-size: calc(var(--text-h4) * 0.8);
}
/*----------------------------------------------------------- LIFEINFORMATION */
#lifeInfo {
  padding: 30px 0 0;
}
#lifeInfo h3 {
  background: #949495;
  color: #ffffff;
  padding: 10px;
  text-align: left;
}
#lifeInfo .detail {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 30px;
  max-width: 1200px;
}
#lifeInfo dl {
  width: calc(100% / 2 - 40px);
  border-bottom: 1px dashed #999999;
  margin: 0 10px 5px;
  justify-content: space-between;
  padding: 0;
}
#lifeInfo dt {
  width: calc(100% - 180px);
  color: inherit;
  background: inherit;
  padding: 5px;
}
#lifeInfo dd {
  width: 180px;
  background: inherit;
  text-align: right;
  padding: 5px;
  font-size: calc(var(--text-body) * 0.8);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
  #S01 .contents:nth-child(1) .contentsDetail {
    padding-inline: 0;
  }
  #S03 .contentsDetail {
    padding-inline: 20px;
  }
  #S04 .contentsDetail {
    padding-inline: 20px;
  }
  #temple {
    padding: 0 20px 2em;
  }
}
/*----------------------------------------------------------- 1024px */
@media screen and (max-width: 1024px) {
  #areaValue .leftBox {
    width: 360px;
  }
  #bOmiya .textBox {
    position: relative;
    max-width: 100%;
    padding: 0;
  }
  #temple {
    flex-flow: column;
    align-items: center;
    padding: 0;
  }
  #temple .leftBox {
    max-width: 600px;
  }
  #temple .rightBox {
    width: 100%;
  }
  #S04 .glidBox ul {
    /* 6列から2列に変更 */
    grid-template-columns: repeat(2, 1fr);
  }
  #S04 .glidBox ul li:nth-child(-n+2), #S04 .glidBox ul li:nth-child(n+3) {
    grid-column: auto;
  }
  #S03 ul li {
    width: calc(100% / 2 - 20px);
  }
  #S05 ul li {
    width: calc(100% / 2 - 20px);
  }
}
/*----------------------------------------------------------- 840px */
@media screen and (max-width: 840px) {
  .detailBox {
    flex-flow: column;
    position: relative;
    padding: 0;
  }
  #areaValue .leftBox {
    width: 100%;
  }
  #areaValue .rightBox {
    position: absolute;
    top: 0;
    background: #0520036b;
  }
}
/*----------------------------------------------------------- 768px */
@media screen and (max-width: 768px) {
  #S03 ul li {
    width: 100%;
  }
  #S05 ul li {
    width: 100%;
  }
  #S04 .flexBox2 ul li {
    width: 100%;
  }
  #S04 .glidBox ul {
    /* 1列に変更 */
    grid-template-columns: 1fr;
  }
  #lifeInfo dl {
    width: 100%;
  }
}
/*----------------------------------------------------------- 640px */
@media screen and (max-width: 640px) {
  #lifeInfo h3 {
    padding: 8px;
  }
  #lifeInfo dt {
    width: auto;
    font-size: calc(var(--text-body) * 0.9);
  }
  #lifeInfo dd {
    width: auto;
  }
}