@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP:500,600,700&display=swap&subset=japanese);
@import url(https://use.fontawesome.com/releases/v5.15.3/css/all.css);

/* ======================= 共通 * 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: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 1rem; list-style: none;}
 li,p,th,td,dl,dt,dd {line-height: 2;}
 p {font-size: 1rem; text-align: justify;}
 a {color: #000; text-decoration: none; border-bottom: #333 dotted 1px;}
 header, footer, header a, footer a {border-bottom: none; color: #FFF;}
 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: min(5vw, 2rem); line-height: 1.5; font-weight: normal; margin-bottom: 2rem;}
 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;}
 .pc_show.cell {display: table-cell;}
 .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;}
.smallText {font-size: .7rem;}
.biggerText {font-size: larger;}
.nolink {pointer-events: none; color: #a7a7a7;}
.flex1 {flex: 1;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w27 {width: 27%; height: auto;}
.w30 {width: 30%; height: auto;}
.w40 {width: 40%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w70 {width: 70%;}
.w80 {width: 80%;}
.w90 {width: 90%;}
.w100 {width: 100%;}
.w200px {width: 200px; height: auto;}
.w300px {width: 300px; height: auto;}
.w400px {width: 400px; height: auto;}
.w1em {width: 1em;}
.w2em {width: 2em;}
.w3em {width: 3em;}
.w4em {width: 4em;}
.w5em {width: 5em;}
.w6em {width: 6em;}
.w7em {width: 7em;}
.w8em {width: 8em;}
.w9em {width: 9em;}
.w10em {width: 10em;}
img {max-width: 100%; max-height: auto;}
#corona_measures {margin-top: 4rem;}
 .caution {color: #f30;}
 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;}
.emergency {
    border: 1px solid #c81414;
    padding: 1rem 2rem !important;
    margin-bottom: 2rem; }
    .emergency p {
      margin-bottom: 1rem;
      line-height: 2 !important; }
    .emergency__title {
      font-size: 1.3rem;
      font-weight: 600; }
      .emergency__title__sub {
        font-weight: 600; }

        /* ======================= 共通 * PC  =========================*/
header {background-color: #231816;}
.logo {width: 100%; padding: 1rem; margin: auto; width: 100%; left: 0; right: 0; background-color: #FFF; text-align: center;}
.logo a div {height: auto; width: 14%; margin: auto;}
.main-pic {margin:auto; background-image: url(img/main-bg_pc.jpg); background-size: cover; background-position: center; aspect-ratio: 1.71;}
.yoimiya-main-pic {max-width: 1440px; margin:auto;}
.kodomo-main-pic {max-width: 1440px; margin:auto;}
nav {background: #231816;}
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 .5rem;}
.entry-title {font-size: min(5vw, 2rem); padding: 2rem 0; text-align: center; line-height: 1.5;}
article {background: url(img/bg_hex.png);}
.main {max-width: 1200px; margin: auto; position: relative; background-color: #FFF; padding: 80px 100px 0;}
section {padding-top: 2rem; padding-bottom: 4rem;}
#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;}
#index table {width: 100%;}
#index table span {display: inline-block;}
#index table th, #index table td {padding: 1rem;}
#index table .date:nth-child(n+2) {text-align: center; background-color: #ddcdcd;}
#index table th {text-align: center; vertical-align: middle; background-color: #dedede;}
#index table .time {border: solid 1px #ddcdcd; text-align: center; width: 25%;}
#index table .title {border: solid 1px #ddcdcd; text-align: center; background-color: #eedfdf;}
#descriptions h3 {padding-top: 3rem; border-top: 1px solid #999; margin-top: 3rem;}
#descriptions h2+h3 {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;}
.outer {display: flex; justify-content: space-between; padding-left: 1rem; flex-wrap: wrap;}
.outer .innerL {width: 52%; height: auto;}
.outer .boxR {width: 43%; height: auto; line-height: 1.6;}
#descriptions ul {display: flex; justify-content: space-between; flex-wrap: wrap; padding-left: 1rem; padding-bottom: 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; max-width: 800px; margin: 2rem auto!important;}
.zu a::after {content: "クリックで拡大します"; display: block; font-size: .8rem; position: absolute; bottom: .3rem; right: 1rem; pointer-events: auto;}
#descriptions ul.entry-caution {display: block;padding-left: 1rem; padding-bottom: 0;}

/* ======================= CAUTION POP UP  =========================*/
 .layer_board_bg,
 .layer_board {position: absolute;}

 .layer_board_bg {position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0; left: 0; display: none; cursor: pointer; background: #000;}

 .layer_board {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; text-align: center; z-index: 2000; padding: 50px;}

 .layer_board p {margin-bottom: 6px;}
.layer_board p.gothic {text-align: center; font-size: 1.1rem; margin-top: 1rem;}

 .btn_close {display: block; text-decoration: none; background: #000; color: #fff; text-align: center; padding: 20px 40px; width: 200px; margin: 0 auto
 }
/* ======================= CAUTION POP UP  =========================*/

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




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


/* ======================= BODY * PC  =========================*/
.hikite div {text-align: center; color: #FFF; background: #000; padding: 1.5rem 0; margin-bottom: 1rem; line-height: 1.7;}
.hikite div.entry, .hikite div.entry div {text-align: left; color: #333; background: #FFF; padding: .5rem 0; margin-top: 0;}
.hikite div.entry .form div {padding: 0; margin-top: 0;}
div.hikite div {text-align: center; color: #a7a7a7;}
#moyooshi, #roadclose {margin-top: 6rem;}
#greeting h2:first-child {font-size: min(5vw, 2rem); line-height: 1.5; font-weight: normal; margin: -1rem auto 3rem; text-align: center;}
#greeting h2:first-child::before {content: none;}
.entry #greeting p {font-size: 1.2rem; display: grid; place-content: center; max-width: 680px; margin: auto;}
#greeting .zu {margin-bottom: 4rem!important;}
#greeting table {margin: 0 0 3rem 2rem;}
#greeting table th, #greeting table td {vertical-align: top; padding: .4rem;}
#greeting table th {white-space: nowrap;}
/* ======================= BODY * PC  =========================*/

/* ======================= FORM  =========================*/
.wrap {
    flex-wrap: wrap;
}
.flex {
    display: flex;
}
.infoName, .infoEmail, .infoTel {
    position: relative;
}
/* ======================= FORM  =========================*/
/* ======================= FORM  =========================*/
/*
FORM
*/
.mailform, .mailform div {width: 100%; align-items: baseline; margin-bottom: 1rem;}
dl.mailform + dl.mailform {margin-top: 2rem;}
.infoName, .infoEmail, .infoTel {position: relative;}
.infoName .infoName, .infoName [type=text] {margin-right: 0;}
.infoName {margin-bottom: .3rem;}
.form {/* input[type=text]:nth-child(2) {margin-top: 4rem;} */}
.form .infoRequired {font-size: .8rem; display: inline-block; color: #333;}
dd.infoName:has([type=radio]) {display: flex;}
form#mailformpro label.mfp_checked {padding: 0 .3rem!important;}
@media (max-width: 580px) {.form .infoRequired {display: inline-block;}}
.form span {color: #C90A36; line-height: 1.7;}
.form dt {text-align: right; line-height: 1.4; width: 20%; padding: 0 8px 0 0; margin-top: 1rem;}
@media (max-width: 580px) {.form dt {width: 100%; text-align: left; margin-bottom: .3rem;}}
.form dd {width: 73%; /*border-bottom: solid 1px $baseBlack; */ vertical-align: 0; padding-left: 8px; margin-bottom: 1rem; margin-top: 1rem; position: relative; align-items: baseline;}
@media (max-width: 580px) {.form dd {width: 100%;}}
.form select {/* -webkit-appearance: none; */}
.form input[type=text], .form textarea, .form select {border-bottom: none; vertical-align: 0;}
.form select {text-align: center; font-size: 1rem;}
.form textarea {width: 98% !important; height: 12em !important; line-height: 1.7;}
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {background-color: #eee; font-size: 1rem; border-bottom: none;}
.form .checked {padding: 0 0 1rem;}
.form div#mfp_confirm_table {margin-bottom: 2rem;}
.form div#mfp_confirm_table th, .form div#mfp_confirm_table td {padding: 1rem;}
@media (max-width: 580px) {.form div#mfp_confirm_table th, .form div#mfp_confirm_table td {display: block; width: 100%; text-align: left !important;}}
.form div#mfp_confirm_table th {text-align: right;}
@media (max-width: 580px) {.form div#mfp_confirm_table td {border-top: none;}}
.form .add {display: none; width: 100%; margin-left: 20%;}
@media (max-width: 580px) {.form .add {margin-left: 0;}}
.form .add .infoName {margin-bottom: 1rem;}
.form .add .infoName:first-child {margin-top: -2rem;}
.form .add .infoName:last-child {margin-bottom: 4rem;}
section#greeting + section#entry {padding: 0;}
.form input[type=text] {margin-top: 1rem; display: inline-block;}
span.exp {display: block; width: 100%; color: #000;}
div.mfp_err {top: auto!important; bottom: -.2rem!important; position: relative!important;}
/* ======================= div.mfp_errFORM  =========================*/

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


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



/* ======================= スモールPC  ========================= */
@media (max-width: 999px) {
nav ul li::before, nav ul li::after {content:"|"; padding: 0 .5rem; margin: 0 .5rem;}
}



/* ======================= モバイル  ========================= */
@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;}
 .logo a div {height: auto; width: 40%; padding: 0;}
#news {padding: 0;}
#news h3 {margin-left: 1%;}
#index table th, #index table td {padding: .3rem;}
#greeting table {margin: 0 0 3rem .5rem;}
 .w30 {width: 60%;}
 .w40 {width: 100%;}
}

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

@media (max-width: 526px) {
 .sp_show {display: inline-block;}
 .sp_show.row {display: table-row!important;}
 .pc_show {display: none!important;}
 #descriptions td {padding-right: 1rem; vertical-align: top;}
 .logo {width: 100%; padding-left: 1rem; margin: 0;}
 .main-pic {width: 100%; margin:auto; background-image: url(img/main-bg_sp.jpg); background-size: cover; background-position: center; aspect-ratio: 1.07;}
 .sp_header-img img {width: 50%; margin: 0;} 
 nav ul {width: 100%; margin: auto; text-align: center; padding: 1rem 0; display: flex; justify-content: space-evenly;}
 .layer_board {padding: 20px; width: 90%;  height: auto;overflow-x: auto;}
 .outer .boxR {width: 90%; margin: 1rem auto;}
 .outer .innerL {width: 98%;}
.w50 {width: 100%;}
.w60 {width: 100%;}
.w70 {width: 100%;}
.w80 {width: 100%;}
.entry #greeting p {font-size: 1.05rem;}
.form dt {margin-top: 0;}
.form dd {margin-top: 0;}
}
@media (max-width: 439px) {
li,p,th,td,dl,dt,dd {font-size: .875rem;}
nav ul li::before, nav ul li::after {content: "|"; padding: 0; margin: 0;}
.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:1.5rem 0 2rem ;}
 h2:before {content: url(img/tommoe.svg); width: 19px; height: auto; display: block; float: left; margin: -.45rem 2rem 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;}
}