@charset "UTF-8";

#wrapper .sp-show{ display: none; }
#main-content { max-width: 940px; width: 100%; margin: auto; background-color: #eee; }
#main-content > .ttl { font-size: 30px; line-height: 1.4em; font-family: 'Noto Serif JP', serif; color: #FFFFFF; text-align: center; margin-top: 20px; padding: 20px 0; background-image: url(../image/title_bg.png); background-color: #666; }
#main-content > .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: distribute; align-content: space-around; padding:20px;}
#main-content > .grid > label { flex-basis: 286px; border: 1px solid #ddd; overflow: auto; min-width: 0; background-color: #FFF; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 1; margin:7px;}
#main-content > .grid > label > div > p { font-family: "Noto Sans JP"; text-align: center;}
#main-content > .grid > label > div > img { text-align: center; padding: 10px; width: 283px;}
#main-content > .grid > label > div > .day { padding: 5px; color: #fff; background-color: #000;}
#main-content > .grid > label > div > .ttl { margin: 0 auto; padding-bottom: 15px; vertical-align: middle; font-weight:600; }
#main-content > .grid > label > div > .ttl .ns { font-weight:400; }
#main-content > .grid > label { cursor: pointer; transition-duration: 0.5s; float: left;}
#main-content > .grid > label:hover { transition-duration: 1s; opacity: 0.5; -webkit-transition-duration: 1s; -webkit-opacity: 0.5;}
#main-content .grid .f8evsp { background-color: #FFF9EE; }
#main-content .grid .f8evsp .day { background-color: #EB8E2B; }
.modalCheck { display: none; }
.btn { text-align: center; }
.btn label { display: inline-block; padding: 0.8em 1.5em; color: #fff; font-size: 24px; background-color: #9A9A9A; text-decoration: none; border-radius: 5px; -webkit-transition: 0.3s cubic-bezier(1, 0, 0, 1); transition: 0.3s cubic-bezier(1, 0, 0, 1); -webkit-transition-property: background-color, -webkit-box-shadow; transition-property: background-color, -webkit-box-shadow; transition-property: background-color, box-shadow; transition-property: background-color, box-shadow, -webkit-box-shadow; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3); }
.btn label:hover { background-color: #555454; -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); }
.btn.small label { font-size: 18px; margin-bottom:15px 0; }
.modalWrap, .modalBg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; z-index: 1001; }
.modalWrap { overflow: auto; opacity: 0; visibility: hidden; transition: 0.3s cubic-bezier(1, 0, 0, 1); transition-property: opacity; will-change: opacity; -webkit-overflow-scrolling: touch; }
.modalBg { cursor: pointer; opacity: 0.7; background-color: #000; z-index: 998; }
.modalBg label { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; }
.modalCon { position: absolute; top: 5%; left: 0; right: 0; width: 92%; max-width: 800px; height: auto; margin: 3em auto; z-index: 1002; }
.modalInner { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; height: 100%; padding: 0 1.5em 1.5em; cursor: default; background-color: #fff; border-radius: 5px; -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); }
.modalInner-f8evsp { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; height: 100%; padding: 0 1.5em 1.5em; cursor: default; background-color: #FFF9EE; border-radius: 5px; -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3); }
.modalCloseBtn { position: absolute; top: 0; right: 0; }
.modalCloseBtn label { display: inline-block; padding: 0.5em; color: #333; text-decoration: none; font-size: 2em; }
.modalCheck:not(:checked) ~ #wrapper > *:not(.modalWrap) { -webkit-filter: blur(0px); filter: blur(0px); }
.modalCheck:not(:checked) ~ #wrapper .modalWrap { opacity: 0; visibility: hidden; }
.modalCheck:checked ~ #wrapper > *:not(.modalWrap) { -webkit-filter: blur(3px); filter: blur(3px); }

#modal01:checked ~ #wrapper #modal01Con { opacity: 1; visibility: visible; }
#modal02:checked ~ #wrapper #modal02Con { opacity: 1; visibility: visible; }
#modal03:checked ~ #wrapper #modal03Con { opacity: 1; visibility: visible; }
#modal04:checked ~ #wrapper #modal04Con { opacity: 1; visibility: visible; }
#modal05:checked ~ #wrapper #modal05Con { opacity: 1; visibility: visible; }
#modal06:checked ~ #wrapper #modal06Con { opacity: 1; visibility: visible; }
#modal07:checked ~ #wrapper #modal07Con { opacity: 1; visibility: visible; }
#modal08:checked ~ #wrapper #modal08Con { opacity: 1; visibility: visible; }
#modal09:checked ~ #wrapper #modal09Con { opacity: 1; visibility: visible; }
#modal10:checked ~ #wrapper #modal10Con { opacity: 1; visibility: visible; }

.modalTtl { font-family: 'Noto Serif JP' ; padding: 2em 0.5em 0em; font-size: 1.8em; line-height: 1.5em; text-align: center; }
.modalTtl > .ns { font-size: 0.7em; line-height: 0.7em; text-align: center; }
.modalDate { font-family: "Noto Sans JP"; font-weight: 700; padding: 0.8em 0.5em 1.5em; font-size: 1.4em; line-height: 1.5em; text-align: center; }
.modalDate > .ns { font-size: 0.7em; line-height: 0.7em; font-weight: 400; text-align: center; }
.modalText { margin: 0 1em 2em; clear: left; }
.modalText > .modalCover > img{ width: 45%; padding:0 2em 0 0; float: left; }
/*.modalText .txt{ width: 55%; float: left; }*/
.modalText + .modalText { padding-top: 20px; }
.modalText > p { font-size: 1.2em; font-family: "Noto Sans JP"; margin-bottom: 1em; line-height: 1.5; }
.modalText > .price { font-size: 1.4em; font-weight: 900; }
.modalText > .price > .ns { font-size: 0.7em; font-weight: 300; }
.modalInner > .btn { padding:20px 0 10px; clear: left; }


@media (max-width: 480px) {

#wrapper .pc-show { display: none; }
#wrapper .sp-show{ display: inline;; }
#main-content > .ttl { font-size: 18px; line-height: 1.5em; font-family: 'Noto Serif JP', serif; color: #FFFFFF; text-align: center; margin:0px; padding: 10px 0; background-image: url(../image/title_bg.png); background-color: #666; }
#main-content > .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: distribute; align-content: space-around; padding:5px;}
#main-content > .grid > label { flex-basis: 46%; border: 1px solid #ddd; overflow: auto; min-width: 0; background-color: #FFF; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 1; margin:5px;}
#main-content > .grid > label > div > p {font-family: "Noto Sans JP"; font-size:12px; text-align: center; }
#main-content > .grid > label > div > img {text-align: center; padding: 5px; width: 95%;}
#main-content > .grid > label > div > .day { font-size:12px; padding: 5px; color: #fff; background-color: #000;}
#main-content > .grid > label > div > .ttl { font-size:12px; line-height: 1.2em;  margin: 0 auto; padding:0px 10px 10px; vertical-align: middle; font-weight:600; letter-spacing:-1px; }
#main-content > .grid > label > div > .ttl .ns { font-size:10px; line-height: 1.2em; font-weight:300; }
.content { margin: 1.5em auto;}
.modalInner { padding-left: 1em; padding-right: 1em; }
.modalTtl { padding: 1em 0 0.5em; font-size: 1.6em; line-height: 1.5em; text-align: center; }
.modalTtl > .ns { font-size: 0.6em; line-height: 0.6em; text-align: center; }
.modalDate { padding: 0 0.5em; font-size: 1.4em; line-height: 1.4em; text-align: center; }
.modalDate > .ns { font-size: 0.7em; line-height: 0.7em; font-weight: 400; text-align: center; }
.modalText > .modalCover { margin: 0 0 1em; }
.modalText > .modalCover > img{ width: 100%; padding:0 0 1em; }
.modalText > p { font-size: 1.2em; font-family: "Noto Sans JP"; line-height: 1.5; }
.modalInner > .btn { padding:0 0 10px; }
}