@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');

a
 {
  color: #ccbdb1;
  text-decoration: none;
 }

hr
 {
  border:none;
  border-top: 1px dashed #403434;
  margin-left: 80px;
  margin-right: 80px;
 }

a:visited
 {
  color: #ccbdb1;
 }

img
 {
  margin :0 auto;
  display : block;
 }

header
 {
  display: flex;
  width: 100%;
  height: 73px;
  margin: 0;
  padding: 0;
  color:#ffffff;
  background-color:#403434;
  position: fixed;
  z-index: 1000;
 }

main
 {
   width: 800px;
   margin: 0 auto;
   padding: 0 auto;
   flex: 1;
   background-color: #ccbdb1;
   position: relative;
   z-index: 100;
 }

.church-logo
 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 2.5rem;
 }

#mokuji
 {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 2rem;
  right: 30vw;
 }

div#mokuji img
 {
  width: 65px;
 }

#main-pic
 {
  width: 100%;
  margin: auto;
  background-color: #000000;
 }

table
 {
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  width: 75%;
  background: #3d4429;
  color: #ccbdb1;
  border: solid 3px #ccbdb1;
  border-collapse: collapse;
 }

table th, table td
 {
  border: solid 3px #ccbdb1;
 }

table td:hover
 {
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  width: 38%;
  background: #0f0c0c;
  color: #000000;
  border: solid 3px #ccbdb1;
  border-collapse: collapse;
  transition: 0.3s;
 }

body
 {
  background-image: url("../image/japanese-paper_00241.jpg");
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: 'Noto Serif JP', serif;
 }

h2
 {
  text-align: center;
  background-color:#403434;
  color: #ccbdb1;
  font-size: 21px;
 }

.textbox
 {
  border: solid 5px #403434;
  background-color: #403434;
 }

.paragraph
 {
 color: #3c2e2e;
 }

.wrapper
 {
  margin: 0 auto;
  width: 50%;
  text-align: center;
 }

.txt
 {
  display: inline-block;
  text-align: left;
 }

#facebook-iframe
 {
  text-align: center;
 }

.guidebox
 {
  background-color: #3d4429;
  margin: auto;
  padding: auto;
  border: solid 5px #3d4429;
  text-align: center;
  color: #ccbdb1;
 }
footer
 {
  display: flex;
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0;
  color: #ccbdb1;
  background-color: #403434;
 }

.footer-txt
 {
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 14px;
  font-size: 14px;
 }

 /* サイドメニュー */
 
#menuopen-input
 {
  display: none;
 }
#menuopen-input:checked ~ #menu-nav{ right: 0; }
#menuopen-input:checked ~ #main-container{ right: 240px; }

#menu-nav
 {
  position: fixed;
  height: 100%;
  width: 400px;
  top: 73px;
  right: -400px;
  background: #3d4429;
  color: #ccbdb1;
  z-index: 1000000000;
  transition: right 0.1s linear;
 }

#menu-nav li
 {
  list-style: none;
  height: 48px;
  line-height: 48px;
  padding-left: 24px;
  font-size: 18px;
 }

#menu-nav li:hover
 {
  background-color: #0f0c0c;
  transition: 0.3s;
  font-size: 18px;
 }

#menu-nav li a
 {
  color: #ccbdb1;
  font-size: 18px;
 }

#menu-nav li:nth-child(1) span:nth-child(2)
 {
  padding-left: 120px;
  font-size: 18px;
  cursor: pointer;
 }

#menu-nav li:nth-child(1) span label
 {
  cursor: pointer;
 }


#main-container
 {
  position: relative;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
  transition: right 0.1s linear;
  -webkit-transition: right 0.1s linear;
 }


@media screen and (max-width: 600px) {

img[src="image/toppic.png"]
 {
  width: 100%;
 }

.wrapper
 {
  width: 80%;
 }

main
 {
  width: 100%;
 }

#mokuji
 {
  position: absolute;
  vertical-align: middle;
  right: 5vw;
  height: 25px;
 }

div#mokuji img
 {
  width: 40px;
 }

 .church-logo
 {
  position: relative;
  display: flex;
  align-items: center;
  margin: auto;
  padding: auto;
 }

img[src="image/churchlogo.png"]
 {
  width: 200px;
 }

header
 {
  height: 60px;
 }

iframe
 {
  width: 80%;
 }

table
 {
  display: none;
 }

p
 {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
 }

a
 {
  font-size: 15px;
 }

h2
 {
  font-size: 18px;
 }

 .text 
 {
  text-align: center;
  display: inline-block;
 }

footer
 {
  height: 60px;
 }

.footer-txt
 {
  font-size: 10px;
  position: relative;
  text-align: center;
  vertical-align: middle;
 }



 /* スマホサイドメニュー */
 
#menuopen-input
 {
  display: none;
 }

#menuopen-input:checked ~ #menu-nav{ right: 0; box-shadow: -6px 0 25px rgba(0,0,0,.35);}
#menuopen-input:checked ~ #main-container{ right: 250px;}
#menuopen-input:checked ~ #nav-close{display: block; opacity: .5;}

#menu-nav
 {
  position: fixed;
  height: 100%;
  width: 250px;
  top: 60px;
  right: -250px;
  background: #3d4429;
  color: #ccbdb1;
  z-index: 1000000000;
  transition: right 0.1s linear;
  font-size: 15px;
 }

#menu-nav li
 {
  list-style: none;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  font-size: 13px;
 }

#menu-nav li:hover
 {
  background-color: #0f0c0c;
  transition: 0.3s;
  font-size: 13px;
 }

#menu-nav li a
 {
  color: #ccbdb1;
  font-size: 13px;
 }

#menu-nav li:nth-child(1) span:nth-child(2)
 {
  padding-left: 5px;
  font-size: 13px;
  cursor: pointer;
 }

#menu-nav li:nth-child(1) span label
 {
  cursor: pointer;
 }


#main-container
 {
  position: relative;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
  transition: right 0.1s linear;
  -webkit-transition: right 0.1s linear;
 }

#nav-close
 {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 10000;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
 }


}