@charset "UTF-8";
/* CSS Document */
/***********************************************
								共 通 項 目
***********************************************/
body { overflow-x: hidden; background-color: #FEFEFE; }

@media (min-width: 769px) { a[href^="tel:"] { pointer-events: none; } }
.twt { font-size: 0; /*background-color: rgba(0,0,0,0.70);*/ }
.twt .twitter-timeline-rendered, .twt iframe, .twt a { width: 100%; height: 100% !important; }

.anchor-point { margin-top: -8rem; padding-top: 8rem; }
.anchor-point:nth-of-type(even) .content-box { background-color: #F2F2F2; }

.attention { background-color: #F2F2F2; }
.attention div p { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; font-weight: 700; border: solid 2px #FF0000; position: relative; transition: .4s; color: #FF0000; }
.attention div p a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.attention div p:hover { background-color: #FEFEFE; }
@media (min-width: 768px) { .attention div p { text-align: center; } }

.button { line-height: 1.8; font-weight: 500; font-size: 1.4em; background-color: #FF0000; color: #FEFEFE; border-radius: 1em; position: relative; text-align: center; border: solid 2px #FF0000; transition: .4s; }
.button a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; text-indent: -9999px; }
.button:hover { background-color: transparent; color: #FF0000; }

p { margin-bottom: 0; }

/*
.loadimg { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; opacity: 1; visibility: visible; transition: 1s; display: flex; align-items: center; justify-content: center; z-index: 99999; background-color: $white;
	> img { width: 100px; height: 100px;}
}
.loadimg.loaded { opacity: 0; visibility: hidden; }
#loaded-content { opacity: 0; visibility: hidden; transition: 1s; }
#loaded-content.loaded { opacity: 1; visibility: visible;}
*/
.btn { width: 100%; text-align: center; background-color: #FFAE00; color: #FEFEFE !important; position: relative; font-size: 1em; transition: .4s; }
.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
.btn:hover { background-color: #D79200; }

.text-shadow { text-shadow: 1px 1px 1px #FCEE21, -1px -1px 1px #FCEE21, -1px 1px 1px #FCEE21, 1px -1px 1px #FCEE21, 0px 1px 1px #FCEE21,  0px -1px 1px #FCEE21, -1px 0px 1px #FCEE21, 1px 0px 1px #FCEE21,6px 6px 8px #FFF, -6px -6px 8px #FFF, -6px 6px 8px #FFF, 6px -6px 8px #FFF, 0px 6px 8px #FFF,  0px -6px 8px #FFF, -6px 0px 8px #FFF, 6px 0px 8px #FFF; }

/***********************************************
								コ ン テ ン ツ
***********************************************/
.hero-area { background: url("../img/bg.jpg") center/cover no-repeat; }

.content-box h2 { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; font-weight: 700; line-height: 1; font-family: 'Raleway', 'Roboto', 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif; }
.content-box h2 span { font-size: 2.7em; position: relative; }
.content-box h2 span::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; border-radius: 1px; background-color: #FF0000; display: block; content: ""; }
.content-box p { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }

.intro h3 { font-size: 1.8em; font-weight: 700; font-style: italic; }
.intro p { line-height: 1.8; font-weight: 500; }

.segment { display: flex; flex-direction: column; height: 100%; padding: 0; position: relative; font-size: 0; background-color: #FEFEFE; box-shadow: 2px 2px 5px #DDD; }
.segment p { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }
.segment .img { width: 100%; transition: 0.4s; border-bottom: solid 1px #EEE; min-height: 0%; }
.segment .img img { width: 100%; flex-shrink: 0; height: auto; }
.segment .date { text-align: center; }
.segment .date span { color: #FEFEFE; display: inline-block; font-size: 0.8em; font-weight: 700; }
.segment .ekiaco { background-color: red; }
.segment .eki { background-color: blue; }
.segment .dr { background-color: orange; }
.segment .drcn { background-color: limegreen; }
.segment .gtk { background-color: magenta; }
.segment .title { font-weight: 700; margin: 0; transition: 0.4s; line-height: 1.4; }
.segment .title span { font-size: 0.8rem; }
.segment .detaile { font-size: 1rem; font-size: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.3636)), 1.2rem); margin-top: auto; text-align: right; transition: 0.4s; border-top: solid 1px #EEE; }
.segment .detaile span { float: left; color: #FF0000; text-decoration: underline; }
.segment a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: block; text-indent: -9999px; }
.segment:hover .img { opacity: 0.8; }
.segment:hover .title, .segment:hover .detaile { color: #09F; }
.segment.itemlink { flex-direction: row; align-items: center; font-size: initial; border-radius: 1rem; overflow: hidden; }
.segment.itemlink .img { width: 35%; aspect-ratio: 5 / 6; }
.segment.itemlink .img img { width: auto; height: 100%; }
.segment.itemlink .title { font-size: 1.2em; line-height: 1; }
.segment.itemlink .title span { font-size: 0.6em; }

.notice { width: 100%; font-size: 0; background-color: #FEFEFE; border: solid 1px #DDD; font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }
.notice h3 { font-size: 1.2em; font-weight: 500; border-left: solid 0.75rem #e60044; border-bottom: solid 1px #e60044; line-height: 1.6; }
.notice p { font-size: 1.0em; }
.notice p span { font-weight: 700; }

#venue h3 { font-weight: 700; font-size: 1.2em; }
#venue h4 { font-weight: 700; border-bottom: dashed 1px #CCC; }
#venue p span { font-size: 0.8em; }
#venue a { color: #333; text-decoration: none; }
#venue a:hover { color: #333; text-decoration: underline; }

#corona h2, #point h2 { line-height: normal; }
#corona h2 span, #point h2 span { font-size: 2em; border-bottom: solid 3px #FF0000; }
#corona h2 span::after, #point h2 span::after { display: none; }
#corona h3, #point h3 { font-weight: 500; font-size: 1.4em; }
#corona ul, #point ul { background-color: #EEE; border: solid 1px #666; }
#corona ul li, #point ul li { padding-left: 1.0em; text-indent: -1.0em; font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }
#corona ul li span, #point ul li span { font-weight: 700; }

/***********************************************
								ト ピ ッ ク ス
***********************************************/
.page-title { background-color: #F2F2F2; }
.page-title h2 { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }
.page-title h2 span { font-size: 1.8em; font-weight: 700; }

.content-detail .bb1, .about .bb1 { border-bottom: solid 1px #CCC; }
.content-detail h2, .about h2 { font-size: 1.6em; font-weight: 700; }
.content-detail .date, .about .date, .content-detail .place, .about .place { font-size: 1.2em; font-weight: 500; }
.content-detail .synopsis, .about .synopsis { line-height: 1.6; }
.content-detail .synopsis span, .about .synopsis span { font-style: italic; font-weight: 700; }
.content-detail .overview h3, .about .overview h3 { font-size: 1.4em; font-weight: 700; background-color: #F2F2F2; }
.content-detail .overview ul, .about .overview ul { position: relative; }
.content-detail .overview ul::before, .about .overview ul::before { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 3px; background-color: #333; content: ""; display: block; }
.content-detail .overview ul li, .about .overview ul li { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); line-height: 1.4; }
.content-detail .overview h4, .about .overview h4 { font-size: 1em; font-weight: 700; }
.content-detail .overview ul.caution::before, .about .overview ul.caution::before { display: none; }
.content-detail .overview ul.caution li, .about .overview ul.caution li { position: relative; padding-left: 1.25em; }
.content-detail .overview ul.caution li::before, .about .overview ul.caution li::before { content: "○"; position: absolute; top: 0.25em; left: 0.7em; transform: translateX(-0.5em); display: block; font-size: 0.6em; }
.content-detail .overview ul.caution span, .about .overview ul.caution span { font-weight: 700; }

.about h2 { position: relative; padding-left: 6.5rem; font-size: 1.8em; }
.about h2::before { height: 6rem; width: 6rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ""; display: block; background: url("../img/k-logo.svg") center/contain no-repeat; }
.about h2 span { font-size: 0.4em; }
.about .genre { padding: 0.2em 0.5em; color: #FEFEFE; background-color: #FF0000; font-size: 0.8em; line-height: 1.4; border-radius: 1.2em; font-weight: 400 !important; }
.about .genre.main { background-color: #BA1C44; }
.about .genre.annex { background-color: #3F69B0; }
.about .place span { font-size: 0.9em; }
.about .place span.open { color: #FF0000; }
.about p span { font-weight: 700; }
.about p a:hover { text-decoration: underline; }