@charset "utf-8";

:root {
  --hamburger-fixed-color: rgba(192, 192, 192, 0.7);
  --heading-bg: rgb(65, 88, 208);
  --heading-bg-grad: rgb(160, 172, 231);
  --menu-bg: rgb(65, 88, 208);
  --menu-hover-bg: rgb(19, 19, 145);
  --text-color: rgb(102, 102, 102);
}

body {
  font-family: sans-serif;
  margin: 0 auto;
  width: 873px;
}

/* スマートフォン専用表示 */
.sp {
  /* PCでは非表示 */
  display: none;
}

/* リンク */
a {
  color: blue;
  text-decoration: none;
}

/* 見出し1 */
h1 {
  color: var(--text-color);
  font-size: 22pt;
  line-height: 1em;
  text-align: center;
}

h1>span.english {
  font-size: large;
}

h1>span.saint {
  font-size: large;
}

h1>span.add {
  font-size: x-large;
}

/* 見出し2 */
h2 {
  background: blue;
  color: white;
  font-size: larger;
  text-align: center;
}

/* 見出し3 */
h3 {
  background: blue;
  color: white;
  font-size: large;
  padding-left: 5px;
  text-align: left;
}

/* テーブル */
table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: lightgray;
  border: 1px solid black;
  color: #555;
  text-align: center;
}

td {
  border: 1px solid black;
  text-align: left;
}

/* ハンバーガーメニュー */
.hamburger button {
  background: transparent;
  border: none;
  padding: 0;
  top: 36px;
  left: 16px;
  width: 36px;
  height: 36px;
}

/* ハンバーガーメニュー（ヘッダ） */
.hamburger .absolute {
  color: white;
  position: absolute;
  z-index: 3;
}

/* ハンバーガーメニュー（スクロール追従） */
.hamburger .fixed {
  color: var(--hamburger-fixed-color);
  position: fixed;
  z-index: 1;
}

/* ハンバーガーメニュー（線） */
.hamburger .line {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
}

.absolute .line {
  background: white;
}

.fixed .line {
  background: var(--hamburger-fixed-color);
}

.hamburger .line:nth-child(1) {
  top: 0%;
}

.hamburger .line:nth-child(2) {
  top: 25%;
}

.hamburger .line:nth-child(3) {
  top: 50%;
}

/* ハンバーガーメニュー（文字） */
.hamburger .text {
  display: block;
  font-size: 8px;
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: 70%;
  left: 0;
  width: 100%;
}

/* ヘッダー */
div.header {
  text-align: center;
}

/* ヘッダーのテーブル（SP版教会名列挙） */
.header table {
  border: 0;
  font-size: small;
  margin-bottom: 20px;
}

.header td {
  border: 0;
  text-align: center;
}

.header div.title {
  background: blue;
  color: white;
  font-size: x-large;
  font-weight: bold;
  line-height: 1.5em;
  margin: 16px 0;
  text-align: center;
}

/* メニューと本文 */
div.main {
  /* メニューと本文を段組み */
  display: flex;
}

/* メニュー */
div.menu {
  width: 210px;
  z-index: 5;
}

/* SP版メニューオープン時の半透明板 */
div.menu-bg {
  background: rgba(0, 0, 0, 0.5);
  /* デフォルト非表示 */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  touch-action: none;
}

/* メニューの行 */
.menu>p {
  background: blue;
  color: yellow;
  display: flex;
  margin: 0 0 3px 0;
  padding: 3px;
}

/* メニュー行（リンクへのマウスホバー） */
.menu>p.link:hover {
  background: var(--menu-hover-bg);
}

/* メニューのリンク */
.menu a {
  color: white;
  display: block;
  width: 210px;
}

/* Facebookのリンク */
.menu a.facebook {
  float: right;
  text-decoration: none;
  width: 25px;
}

/* Facebookのリンク（マウスホバー） */
.menu a.facebook:hover {
  background: none;
}

/* メニューのインライン画像 */
.menu img {
  border: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  vertical-align: text-top;
}

/** 司教区のリンク画像 */
.menu img.diocese {
  width: 127px;
  height: 122px;
}

/* 本文 */
div.content {
  margin: 0 40px;
  text-align: left;
  width: 670px;
}

/* 本文内の段組み */
div.column {
  display: flex;
}

/* 本文のテキスト */
.content {
  color: var(--text-color);
  font-weight: bold;
}

/* 本文のテキスト */
.content p {
  text-align: left;
}

/* 画像（上下中央） */
div.center-image-outer {
  align-items: center;
  display: flex;
  margin: 1em 0;
}

/* 画像（左右中央） */
div.center-image-inner {
  text-align: center;
  width: 100%;
}

/* ページトップへ */
div.pagetop {
  position: fixed;
  bottom: 0;
  width: 873px;
  z-index: 2;
}

.pagetop a {
  align-items: center;
  background: white;
  border: solid 2px black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 10px;
}

/* ページトップへの矢印 */
.pagetop-arrow {
  border-right: 3px solid black;
  border-top: 3px solid black;
  height: 10px;
  transform: translateY(20%) rotate(-45deg);
  width: 10px;
}

/* ページトップへを表示する場合の画面下部マージン */
div.bottom {
  height: 60px;
}

/* スマートフォン用 */
@media screen and (max-width: 890px) {
  body {
    width: auto;
    margin: 5px;
  }

  /* PC専用表示 */
  .pc {
    /* SPでは非表示 */
    display: none;
  }

  /* スマートフォン専用表示 */
  .sp {
    /* SPで表示 */
    display: inherit;
  }

  /* メニューと本文 */
  div.main {
    /* 段組みしない */
    display: block;
  }

  /* メニュー */
  div.menu {
    background-color: white;
    overflow-y: scroll;
    overscroll-behavior: none;
    padding: 10px;
    position: fixed;
    /* 初期位置を画面外に */
    transform: translateX(-100%);
    transition: transform .4s;
    top: 0;
    left: 0;
    height: 100%;
  }

  div.menu.active {
    transform: translateX(0);
  }

  div.menu-bg.active {
    display: block;
  }

  /* コンテンツ */
  div.content {
    margin: 0;
    width: 100%;
  }

  /* コンテンツ内の段組み */
  div.column {
    /* SPでは段組みしない */
    display: block;
  }

  /* ページトップへ */
  div.pagetop {
    width: 100%;
  }
}