/*
Theme Name: 蟷螂山 2025
Theme URI: https://tourouyama.jp
Description: 蟷螂山サイトのテーマ2025：固定ページ
Version: 1
Author: Yumi Asakura
Author URI: http://yumiasakura.com
*/

/* ページ共通 *************************************************/
.page-top {
    text-align: center;
    width: 70%;
    margin: 3em auto;
    background: url(img/page-title.png) top left / 288px 73px no-repeat, url(img/page-title2.png) top right / 288px 73px no-repeat;
}
.page-top h1 {
    font-size: 180%;
    font-weight: bold;
    padding: 1em 0;
}
.page section p {
    line-height: 2.3;
    text-align: justify;
}
.page section p a {
	border-bottom: 1px dotted #7E9F67;
	padding-bottom: .1em;
}
@media screen and (max-width: 768px) {
	.page {
		margin-top: 25%;
	}
	.page-top {
    	width: 100%;
    	background: url(img/page-title.png) top left / 30% no-repeat, url(img/page-title2.png) top right / 30% no-repeat;
	}
	.page-top h1 {
    	font-size: 140%;
		padding: .5em 0;
	}
}

/* 横スクロール共通 *************************************************/
.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
    .scroll-container::-webkit-scrollbar {
      display: none;
    }
    .scroll-list {
      display: flex;
		margin: 0 0 2em 10%;
    	padding: 0 6% 0 0;
		width: max-content;
    }		
    .scroll-item {
      max-width: 25vw;
      flex: 0 0 auto;
      background: rgb(249 249 249 / 50%);
      border-radius: 8px;
      padding: 1em;
	margin-right: 1em;
      text-align: center;
    }	
    .scroll-item img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      margin-bottom: 8px;
    }
.page section .scroll-item p {
	font-size: 80%;
	margin-top: 1em;
	line-height: 1.7em;
	padding: 0 .5em;
}
    @media (max-width: 768px) {      		
	.scroll-item {
        min-width: 70vw;
      }
    }
    /* インジケーター */
    .indicator-wrapper {
      height: 2px;
		margin-left: 10%;
      background: #D2CDC3;
      position: relative;
      width: 40%;
    }
    .indicator-bar {
      height: 100%;
      width: 0%;
      background: white;
      transition: width 0.1s ease;
    }
  


/****************************************
		蟷螂山について
*****************************************/
.about-top ul {
    margin-top: 1em;
    font-size: 80%;
}
.about-top ul li {
    display: inline-block;
}
.about-top ul li:after {
    content: " | ";
}
.about-top ul li:last-of-type:after {
    content: "";
}
.about h2 {
    font-size: 140%;
}
.about section {
    margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
	.about-top ul {
    	font-size: 70%;
    	padding: 0 1em;
	}	
	.about h2 {
    	font-size: 120%;
	}
	.about section {
    	margin-bottom: 7em;
	}
}


/* 祇園祭と蟷螂山 ********************************************/
#gion {
    text-align: left;
    margin-bottom: 0;
}
#gion h2 {  
    width: 100%;
    height: 20vw;
    background: url(img/title-gion.png) top right / 88% no-repeat;
    position: relative;
}
#gion h2 span {
    position: absolute;
    top: 13.3vw;
    left: 23.9%;
}
.gion-text {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: -5em auto 5em auto;
}
.gion-text p {
    width: 28%;
    margin-top: 6em;
    margin-left: 6%;
    margin-right: 3%;
}
.gion-text img {
    width: 40%;
    height: auto;
    object-fit: contain;
}
@media screen and (max-width: 768px) {
	#gion h2 {
    	position: inherit;
    	text-align: center;
		padding: .9em 0;
    	height: 22vw;
    	background: url(img/title-gion.png) top left -30% / 150% no-repeat;
	}
	#gion h2 span {
    	position: inherit;
	}
	.gion-text {
    	margin: 0 auto;
    	flex-direction: column-reverse;
    	justify-content: inherit;
	}
	.gion-text p {
    	width: 80%;
    	margin: 2em auto 0 auto;
	}
	.gion-text img {
    	width: 100%;
    	margin-top: 2em;
	}
}

/* あゆみ ********************************************/
#ayumi {
	width: 69%;
	margin: 0 auto 0 18%;
	padding-top: 2em;
}
#ayumi h2 {
	margin-bottom: 1em;
}
.ayumi-img li img {
	width: 100%;
}
.ayumi-img p {
	line-height: 1.7em;
	font-size: 70%;
	margin-top: 0;
    padding: 0;
	text-align: left;
}
.ayumi-img.scroll-wrapper {
	margin-bottom: 6em;
}
.ayumi-img .scroll-list {
    	margin: 2em 6% 2em 18%;
	}
	.ayumi-img .scroll-item {
		max-width: 29vw;
	    padding: 0;
	}
	.ayumi-img .indicator-wrapper {
		margin-left: 18%;
		background: #D2CDC3;
	}
	.ayumi-img .indicator-bar {
		background: #9F998E;
	}
@media screen and (max-width: 768px) {
	#ayumi {
    	width: 80%;
    	margin: 0 10%;
	}
	.ayumi-img .scroll-list {
		margin: 2em 0 2em 10%;
        padding: 0 6% 0 0;
    	}
	.ayumi-img .indicator-wrapper {
    	margin-left: 10%;
	}
}

/* 年表 */
.rekishi {
    margin-left: 1em;
}
.rekishi details {
      width: 75%;
      margin: 1em auto;
      overflow: hidden;
    }
    .rekishi summary {
      cursor: pointer;
      padding: 6% 1em 0 1em;
      width: 100%;
      height: 10vw;
      background: url(img/nenpyou.png) center / 100% no-repeat;
      text-align: center;
      font-size: 1.2em;
      list-style: none;
    }
    .rekishi summary::marker {
      display: none; /* 一部ブラウザ用 */
    }
    /* テキスト切り替え */
    .rekishi summary::after {
      content: "年表をひらく";
    }
    .rekishi details[open] summary::after {
      content: "年表をとじる";
    }
    .rekishi-content {
      width: 94%;
      margin-left: 1.5%;
      padding: 0 5em 5em 5em;
      font-size: 90%;
    border-left: 1px solid #DBCB9B;
    border-right: 1px solid #DBCB9B;
    border-bottom: 1px solid #DBCB9B;
      animation: fadeSlide 0.3s ease;
      background: rgba(255, 255, 255, 0.5);
    }
    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.rekishi table {
      border-collapse: collapse;
      width: 100%;
    }
    .rekishi th, .rekishi td {
      padding: 1em;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid #D2CDC3;      
    }
    th.era {
    width: 3em;
    padding: 1em;
    border-bottom: 0;
      background: rgba(210,215,195,.1);
    }
    th.era2 {
      background: rgba(210,215,195,.25);
      }
.vertical-text {
    text-align: center;
    letter-spacing: 0;
    font-weight: normal;
    color: #77746E;
    font-size: 90%;
}
.vertical-text span {
	display: inline-block;
  transform: translateY(-0.8em);
}
    td.kara {
        border: none;
        width: 1em;
    }
    td.year {
      white-space: nowrap;
      padding-left: 0;		
    }
    td.event {
        padding-left: 0;
    }
.rekishi table tr:last-of-type th, .rekishi table tr:last-of-type td {
	border-bottom: none;
}
@media screen and (max-width: 768px) {
	.rekishi details {
    	width: 95%;
	}
	.rekishi summary {
    	padding: 4.5vw;
        height: 17vw;
        font-size: 0.9em;
		background: url(img/nenpyou-sp.png) center / 100% no-repeat;
	}   
	.rekishi-content {
    	width: 95%;
    	padding: 0 1em 1em 1em;
    	font-size: 80%;
    	border-left: 1px solid #f0e8d0;
    	border-right: 1px solid #f0e8d0;
    	border-bottom: 1px solid #f0e8d0;
	}
	.rekishi table {
		line-height: 1.8em;
	}
	th.era {
    	width: auto;
	}
	td.year {
		font-size: 80%;
		padding-top: 1.2em;
	}
	td.kara {
    	width: 1em;
    	padding: 0;
	}
}

/* からくり（大カマキリ） ********************************************/
#karakuri h2 { 
    width: 100%;
    height: 16.5vw;
    background: url(img/title-karakuri.png) top right / 80% no-repeat;
    text-align: center;
    padding-top: 7%;
}
.movie {
    width: 70%;
    margin: 3em auto 0 auto;
    padding: 1.5em;
    background: url(img/movie-frame.png) top center / 100% no-repeat;
      position: relative;
      padding-bottom: 42%;
      height: 0;
      overflow: hidden;
    }
.video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 55.95%;
      height: 0;
      overflow: hidden;
    }
#karakuri p {
    width: 50%;
    margin: 0 auto 13vw auto;
}
@media screen and (max-width: 768px) {
	#karakuri h2 {
        height: 34vw;
        background: url(img/title-karakuri-sp.png) top right / 94% no-repeat;
        padding-top: 16%;
	}
	#karakuri p {
    	width: 80%;
	}
	.movie {
    	width: 95%;
        padding: .5em .5em 56.25% .5em;
        margin: 1.5em auto 1em -.7em;
	}	 
}


/* 懸装品 ********************************************/
#kensouhin {
    text-align: center;
}
#kensouhin h2 {    
    width: 100%;
    background: url(img/title-kensouhin.png) top center / 100% no-repeat;
    padding: 5.5vw 0;
   margin-bottom: 2em;
}
#kensouhin p {
    width: 50%;
    margin: 0 auto 3em auto;
}
.kensouhin-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 3em 1em;
      width: 80%;
      margin: 0 auto;
    }
    .ken {
    }
    .ken-l {
        width: 91%;
    }
    .ken-r {
        width: 109%;
    }
    .ken img {
      width: 100%;
      height: auto;
      display: block;
    }
    .caption {
      font-size: 0.9em;
      margin-top: 1em;
      text-align: left;
    }
    .caption span {
        padding: 0.3em .5em 0.35em .55em;
        background: rgba(219,203,154,.7);
        margin-right: .3em;
        font-size: 90%;
    }
    .large {
      
    }
    .ken img.diagram {
      margin: 3em 0 0 5%;
      width: 90%;      
    }
@media screen and (max-width: 768px) {
	#kensouhin h2 {
    	background: url(img/title-kensouhin.png) top center / 200% no-repeat;
    	padding: 10vw 0;
	}
	#kensouhin p {
    	width: 80%;
	}
	.kensouhin-container {
    grid-template-columns: 1fr;
    grid-gap: 3em;
    width: 80%;
	}
	.ken-l, .ken-r  {
    	width: 100%;
	}
}


/* おみくじ ********************************************/
#omikuji {
	width: 90%;
	margin: 0 auto 10vw 10%;
}
#omikuji h2 {
	padding-bottom: 3em;
	width: 100%;
    height: 16vw;
    background: url(img/title-omikuji.png) center right / 100% no-repeat;
    padding-top: 6%;
}
.omikuji-inner {
	display: flex;
	justify-content: space-between;
	position: relative;
}
#omikuji p {
	width: 43%;
	padding: 2em 0 0 2em;
}
.video-omikuji {
	width: 48%;	
    border-radius: 0 0 0 10px;
}
.omikuji-inner img {
	width: 245px;
	height: auto;
	position: absolute;
	top: -2px;
    right: 29%;
}
@media screen and (max-width: 768px) {
	#omikuji h2 {
    	padding-bottom: 3em;
        background: url(img/title-omikuji.png) top left / 180% no-repeat;
        padding-top: 5em;
	}
	.omikuji-inner {
    	display: inherit;
	}
	#omikuji p {
    	width: 90%;
		margin-bottom: 1.5em;
		padding: 0;
	}
	.video-omikuji {
    	width: 100%;
	}
	.omikuji-inner img {
    	width: 50%;
    	top: auto;
    	right: auto;
    	bottom: 44vw;
    	left: 0;
	}
}
/* いろいろなカマキリ ********************************************/
.iroiro-top {
    width: 100%;
    height: 60px;
    background: url(img/iroiro-bk-1.png) bottom center / 100% no-repeat;
}
.iroiro-2 {
    width: 100%;    
    background: url(img/iroiro-bk-2.png) center / 20% repeat;
	padding-bottom: 2em;
}
.iroiro-text {
    padding: 4em 10% 2em 10%;
    display: flex;
    align-items: flex-start;    
}
.iroiro-text h2 { 
    width: 15em;
}
.iroiro-text p {
    width: 90%;
}    
.iroiro-3 {
    width: 100%;
    height: 60px;
    background: url(img/iroiro-bk-3.png) top center / 100% no-repeat;
}
 .swiper-container {
      position: relative;
      overflow: hidden;
    }
    .swiper-container.visible {
      overflow: visible;
    }
    .swiper-cards {
      padding: 0 50px;
    }   
.swiper-slide .item {
	border: 1px solid #D2CDC3;
	border-radius: 5px;
	background: url(img/bk3.jpg) repeat;
	background-size: 100px;
	font-size: 80%;
}
.swiper-slide .item-inner {
	padding: 3em;
	display: grid;
	grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
	background: url(img/kado1.png) top left / 22px no-repeat, url(img/kado2.png) top right / 22px no-repeat, url(img/kado3.png) bottom left / 22px no-repeat, url(img/kado4.png) bottom right / 22px no-repeat;
}
.swiper-slide-active .item {
	border: 1px solid #DBCB9B;
}
.swiper-slide .item img {
	width: 100%;
}
.swiper-slide .item h3 {
	font-weight: bold;
	font-size: 140%;
	margin-bottom: .5em;
}
.swiper-slide .item p {
	margin-bottom: 2em;
	line-height: 1.7em;
}
.swiper-slide .item p::before {
	content: "";
	border-top: 1px solid #7E9F67;
	display: block;
	width: 1.5em;
	height: 2em;
	margin-top: 1.5em;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}
.swiper-button-next,
.swiper-button-prev {
background: none;
    border: none;
}
.swiper-button-prev {
  left: 14%!important;
}
.swiper-button-next {
  right: 14%!important; 
}
.swiper-button-next img,
.swiper-button-prev img {
	width: 200%;
}
@media screen and (max-width: 768px) {
	.iroiro-text {
    	padding: 3em 10% 1.5em 10%;
    	align-items: center;
    	flex-direction: column;
	}
	.iroiro-text h2 {
    	width: 100%;
	}
	.iroiro-text p {
    	width: 100%;
    	padding-top: 1em;
	}
	.iroiro-2 {
		padding-bottom: 1em;
	}
	 .swiper-cards {
		padding: 0 10%;
    }   
	.swiper-slide .item-inner {
		padding: 1.5em;
		grid-template-columns: 1fr;
      	gap: 1em;
      	align-items: start;
	}
	.swiper-slide .item h3 {
		font-size: 120%;
		margin-top: -1em;
	}
	.swiper-slide .item p {
    	font-size: 80%;
		margin-bottom: 1em;
	}
	.swiper-slide .item p::before {
	    height: 1em;
    	margin-top: 0.5em;
	}
	.swiper-slide .item-inner div:nth-of-type(2) img {
		display: none;
	}
	.swiper-button-prev {
  		left: 0!important;
	}
	.swiper-button-next {
  		right: 0!important; 
	}
	.swiper-button-next img,
	.swiper-button-prev img {
		width: 2em;
	}	
	.grid-container {
        grid-template-columns: 1fr;
      }
}


    
/* 所在地 ********************************************/
#address {
    text-align: center;
}  
#address h2 { 
    width: 100%;
    background: url(img/title-address.png) top center / 100% no-repeat;
    padding-top: 3em;
   margin-bottom: 2em;
}
#address p {
      margin-bottom: 2em;
      text-align: center;
  }  
.map {
    width: 70%;
    margin: 0 auto 1em auto;
}
.map iframe {
	width: 100%;
    height: 30vw;
}
#address p:last-of-type {
    font-size: 80%;
}
@media screen and (max-width: 768px) {
	#address h2 {
    	background: url(img/title-address.png) top center / 150% no-repeat;
	}
	#address p {
    	width: 80%;
    	margin: 0 auto 2em auto;
    	text-align: left;
	}
	.map {
    	width: 100%;
	}
	.map iframe {
    	height: 80vw;
	}
}

/****************************************
		粽
*****************************************/
.chimaki section {
	width: 70%;
	margin: 0 auto;
}
.chimaki-photo {
	width: 100%;
}
.chimaki section div {
	display: flex;
    justify-content: space-between;
    padding-top: 2em;
}
.chimaki_img {
	width: 22%;
    margin-left: 8%;
    object-fit: contain;
}
.chimaki article {
	width: 53%;
}
.chimaki article p {
	margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
	.chimaki section  {
		width: 100%;
	}
	.chimaki section div {  	
		width: 80%;
		margin: 0 auto;
    	flex-direction: column-reverse;
	}
	.chimaki article {
    	width: 100%;
	}
	.chimaki-photo {
    	height: 25vh;
    	object-fit: cover;
	}
	.chimaki_img {
    	width: 40%;
		margin: 0 auto;
	}
}

/****************************************
		保存会概要
*****************************************/
.info table {
	width: 55%;
	margin: 0 auto;
	text-align: left;
}
.info th {
	font-weight: normal;
	font-size: 80%;
	width: 8em;
}
.info td svg {
	height: 1em;
	margin-right: .5em;
}
.info th, .info td {
	padding: 1.5em 0;
	border-top: 1px solid #DBCB9B;
	border-bottom: 1px solid #DBCB9B;
}
@media screen and (max-width: 768px) {
	.info table {
    	width: 80%;
    	font-size: 90%;
	}
}


/****************************************
		English
*****************************************/
.english section {
	width: 70%;
	margin: 0 auto 5em auto;
	text-align: center;
}
.english section h3 {
	font-size: 140%;
	margin: 2em auto;
	padding: 0 2.5em;
	background: url(img/dia.png) center left / 2em no-repeat, url(img/dia.png) center right / 2em no-repeat;
    display: inline-block;
}
.english section p {
	margin-bottom: 2em;
	text-align: left;
}
.en-photo {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
	font-size: 90%;
	text-align: center;
}
.en-photo div {
	width: 49%;
}
.en-photo img {
	width: 100%;
}
.en-chimaki {
	display: flex;
}
.en-chimaki img {
	width: 15%;
	margin-right: 3em;
}
.en-map iframe {
	width: 100%;
	height: 60vh;
}
.page .en-map p {
	margin-top: 1em;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.english section {
		width: 80%;
		margin: 0 auto 3em auto;
	}
	.en-photo {
    	display: inherit;
	}
	.en-photo div {
    	width: 100%;
    	margin-bottom: 2em;
    	font-size: 80%;
	}
	.en-chimaki {
    	display: inherit;
	}
	.en-chimaki img {
    	width: 30%;
    	margin: 0 35% 1em 35%;
	}
	.en-map iframe {
    	height: 40vh;
	}
}