﻿/*info*/
.church-info, .access, .schedule {
    margin-bottom: 2rem;
}

.church-info {
    display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 1rem;
}

#itemA{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}    
#itemB{
    grid-row: 1/ 2;
    grid-column: 2 / 3;
}    
#itemC{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}    
#itemD{
    grid-row: 2/ 3;
    grid-column: 2 / 3;
}    

.info-text {
    flex: 1;
    margin:1em;
}

.church{
    font-size:1.5rem;
}

.info-text p{
    text-align:left;
}

.sen{
   font-size:1rem;
}
.info-image {
    flex-direction: column; /* ← 縦積みにする */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.info-image img {
    max-width: 100%; /* 親要素の幅に収まるように指定 */
    height: auto; /* 縦横比を保つ */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.info-image p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
}

.access .map { 
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.access p{
    text-align:left;
}

/* ベースのスタイル */
.schedule table {
    width: 80%;
    border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;
}

.schedule th{
    border: 1px solid #ddd;
    padding: 0.5vw;
    text-align: center;
    vertical-align: middle;
    background-color:#800;
    color:#fff;
}

.schedule td {
    border: 1px solid #ddd;
    padding: 0.5vw;
    text-align: center;
    vertical-align: middle;
    background-color:#800;
    color:#000;
}



/* 日曜日、木曜日、土曜日の塗り分け */
    .sunday:nth-child(odd) td,
    .thursday:nth-child(odd) td,
    .saturday:nth-child(odd) td {
    background-color: #fcfbf7; /* 薄いベージュ (奇数行) */
}

    .sunday:nth-child(even) td,
    .thursday:nth-child(even) td,
    .saturday:nth-child(even) td {
    background-color: #fcfbf7; /* 少し濃いベージュ (偶数行) */
}

/* 水曜日、金曜日の塗り分け */
    .wednesday:nth-child(odd) td,
    .friday:nth-child(odd) td {
    background-color: #fcfbf7; /* 薄い緑 (奇数行) */
}

    .wednesday:nth-child(even) td,
    .friday:nth-child(even) td {
    background-color: #fcfbf7; /* 少し濃い緑 (偶数行) */
}


/*-----------------------------------------------------------------------------------------
  スマホ対応CSS
-----------------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {

  /* ナビをフローに戻す（上に固定したいなら sticky の方が自然） */
  .navi {
    position: sticky; /* または position: static; でもOK */
    top: 0;
    z-index: 100; /* 上に出すために少しだけ */
  }

  /* 教会案内ボックスの余白を最小化 */
  .n-box {
    margin-top: 1rem; /* ここを小さくするのが肝 */
  }

  /* 見出しの上マージンも少し抑える（任意） */
  .n-box h2 {
    margin-top: .5rem;
  }

 .church-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #itemB { grid-row: 1; grid-column: 1; }
  #itemA { grid-row: 2; grid-column: 1; }
  #itemC { grid-row: 3; grid-column: 1; }
  #itemD { grid-row: 4; grid-column: 1; }

  #itemB .info-image p {
    display: none;
  }



.schedule table {
    width: 100%;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.schedule td {
    font-size:0.85em;
    padding: 0.5vw;

}




}