@charset "utf-8";
/* CSS Document */

/* ======================= 共通 * PC  =========================*/

* { margin: 0; padding: 0; box-sizing: border-box;}
 header,footer,nav,section,article,aside { display: block;}
 body { font-size: 16px; line-height: 1; background-color: #FFF; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
 p,li,h1,h2,h3,h4,h5,th,td,dl,dt,dd { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 1rem; list-style: none;}
 li,p,th,td,dl,dt,dd { line-height: 1.6;}
 p { text-indent: 1rem; font-size: 0.95rem; text-align: justify;}
 a { color: #000; text-decoration: none; border-bottom: #333 dotted 1px;}
 header a { border-bottom: none;}
 a img { margin-bottom: -9px;}
 a:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: alpha(opacity=70);}
 .cf:before,.cf:after { content: ""; display: table; clear: both;}
 .cf:after { clear: both}
 .cf { zoom: 1}
 /* For IE 6/7 */
.gothic { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
 .wrapper {width: 100%; height: auto;}
 h2 { font-size: 24px; font-weight: normal; margin-bottom: 1rem;}
 h2:before { content: url(img/tommoe.svg); width: 24px; height: auto; display: block; float: left; margin: -.3rem 1rem 0 0;}
 h3 { font-size: 21px; font-weight: normal; line-height: 1.5; color: #A55200; margin: 1rem;}
 h3:before { content: url(img/mrk02.svg); width: 21px; height: auto; display: block; float: left; margin: .2rem 1rem 0 0;}
 h4 { font-size: 16px; font-weight: normal; line-height: 1.5;}
 h4:before { content: "●"; color: #FFC877; margin: 0 4px 0 0;}
 h5 { font-size: 14px; font-weight: normal; line-height: 1.5;}
 h5:before { content: "❖"; color: #FFC877; margin: 0 4px 0 0;}
 .sp_show { display: none;}
 .pc_show { display: inline-block;}
 .flRight { float: right; margin: 0 10px;}
 .flLeft { float: left;}
 .alRight { text-align: right;}
 .aCenter { text-align: center;}
 .alLeft { text-align: left;}
 .small { font-size: smaller;}
 img {width: 100%; height: auto;}
 #page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 5px;
  bottom: 5px;
  background: #666;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ======================= 共通 * PC  =========================*/
header {background-color: #fffcfa;}
.main-pic { max-width: 1200px; margin:auto; background-image: url(img/main-bg_pc.png); background-size: cover; background-position: center; height: 600px;} 
.main-pic .inBox {max-width: 1000px; margin: auto; position:relative; }
.main-pic .inBox .year {background: url(img/reiwa.svg) no-repeat; width: 63px; height: 260px; position: absolute; top:20px; left: 80px;background-size: contain;text-indent: -9999em;}
.main-pic .inBox .title {background: url(img/title.svg) no-repeat; width: 100px; height: 560px; position: absolute; top:20px; right: 80px;background-size: contain; text-indent: -9999em;}
nav {background: linear-gradient(#fffcfa, #FFE5CC);}
nav ul {max-width: 1000px; margin: auto; text-align: center; padding: 20px 0;}
nav ul li { display: inline-block;}
nav ul li::before, nav ul li::after {content:"|"; padding: 0 1rem; margin: 0 1rem;}
article { background: url(img/bg_hex.png);}
.main {max-width: 1000px; margin: auto; position: relative; background-color: #FFF; padding: 40px;}
section {padding-bottom: 2rem;}
#news {border: solid 2px #fbe5cc; margin-bottom: 4rem; padding-bottom: 1rem;}
#news dl {margin: 1rem;}
#news dt {font-weight: 700;}
#news dd {text-indent: -1em; margin: .5rem 0; margin-left: 1.5rem;}
#greeting .chief_priest {display: flex; align-items: center; width: 100%; position: relative; right: 0; justify-content: flex-end;}
#greeting .chief_priest div {padding: 1rem;}
#greeting .chief_priest .photo {width:220px;}
#index dl {margin: 1rem;}
#index dt {font-weight: 700;}
#index dd {text-indent: -1em; margin: .5rem 0; margin-left: 1.5rem;}
#descriptions h3 { padding-top: 2rem; border-top: 1px dotted #ccc; margin-top: 2rem;}
#descriptions h3:first-of-type { padding-top: 2rem; border-top: none; margin-top: 0;}
#descriptions td {padding-right: 1rem; vertical-align: top;}
#descriptions th {padding-right: 1rem; vertical-align: top; white-space: nowrap; text-align: left;}
#descriptions .outer {display: flex; justify-content: space-between; padding-left: 1rem;}
#descriptions .outer .innerL {width: 66%; height: auto;}
#descriptions .outer .boxR {width: 33%; height: auto; line-height: 1.6;}
#descriptions ul {display: flex; justify-content: space-between; flex-wrap: wrap; padding-left: 1rem;}
#descriptions ul .x3 {width: 33%;}
#descriptions ul .x2 {width: 49.5%; padding-bottom: .2rem;}
#descriptions ul .x1 {width: 100%; padding-bottom: .2rem;}
#descriptions ul li {margin-top: .2rem;}
.zu {position: relative;}
.zu::after {content: "クリックで拡大します"; display: block; font-size: .8rem; position: absolute; bottom: .3rem; right: 1rem;}

 /* ======================= HEADER * PC  =========================*/




/* ======================= HEADER * PC  =========================*/


/* ======================= BODY * PC  =========================*/



/* ======================= BODY * PC  =========================*/


/* ======================= FOOTER * PC  =========================*/
.cp {text-align: center;}


/* ======================= FOOTER * PC  =========================*/




/* ======================= モバイル  ========================= */
@media (max-width: 768px) {
body {width: 100%; overflow-x: hidden; }
.main {max-width: 1000px; margin: auto; position: relative; background-color: #FFF; padding: 3%;}
nav ul li::before, nav ul li::after {content:"|"; padding: 0 .1rem; margin: 0 .1rem;}
#news {padding: 0;}
#news h3 {margin-left: 1%;}
}

/* ======================= SP * 共通  =========================*/

@media (max-width: 526px) {
 .sp_show { display: inline-block;}
 .pc_show { display: none;}
 #descriptions td {padding-right: 1rem; vertical-align: top;}
}
@media (max-width: 414px) {
li,p,th,td,dl,dt,dd {font-size: .875rem;}
nav ul li::before, nav ul li::after {content: "|"; padding: 0; margin: 0;}
.main-pic {height: auto;}
.main-pic .inBox {width: 100%; margin: auto; position:relative;  padding-top: 113.2%; }
.main-pic .inBox .year {background: url(img/reiwa.svg) no-repeat; width: 14%; height: 100%; position: absolute; top:3%; left: 6%;background-size: contain;text-indent: -9999em;}
.main-pic .inBox .title {background: url(img/title.svg) no-repeat; width: 18%; height: 100%; position: absolute; top:3%; right: 6%;background-size: contain;text-indent: -9999em;}
.main {width: 100%; margin: auto; position: relative; background-color: #FFF; padding: 6% 3%;}
#greeting .chief_priest div {padding: .3rem;}
#greeting .chief_priest .photo {width: 130px;}
.name p {text-indent: 0; margin: 0; padding: 0; text-align: right;}
 h2 { font-size: 18px; font-weight: normal; margin-bottom: 1.2rem;}
 h2:before {content: url(img/tommoe.svg); width: 19px; height: auto; display: block; float: left; margin: -.45rem 1rem 0 0;}
 h3 { font-size: 18px; font-weight: normal; line-height: 1.5; color: #A55200; margin: .5rem 0 .5rem 0;}
 h3:before { content: url(img/mrk02.svg); width: 18px; height: auto; display: block; float: left; margin: .2rem 1rem 0 0;}
 #descriptions .outer {display: block; padding-left: 0;}
 #descriptions .outer .innerL {width: 100%; height: auto;}
 #descriptions .outer .boxR {width: 100%; height: auto; text-align: center;}
 #descriptions ul {display: block; padding-left: 0;}
 #descriptions ul .x3 {width: 100%; text-align: center;}
 #descriptions ul .x2 {width: 100%;}
 #index dl {margin: 1rem 0; border-bottom: solid 2px #ccc;}
 #index dt {font-weight: 700;}
 #index dd {text-indent: -1em; margin: .5rem 0; margin-left: 1.5rem;}
 #descriptions h3:first-of-type {padding-top: .5rem;}
 #descriptions td, #descriptions th {display: block; text-align: left;}
 #descriptions .sp_show { display: none;}
}