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

/****************************************************
                                        共 通 項 目
****************************************************/
body { color:#333; background-color: #FEFEFE; overflow-x: hidden;}

a, a:visited { color: #333; }
a:hover { text-decoration:underline; }

hr { border: none; border-bottom: dashed 1px #EEE;}

.loading { opacity: 0; transition: 1.0s;}
.loadimg { width: 100%; max-width:100px; height: 100%; max-height:100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%); opacity: 1.0rem; transition: 1.0s;}


/********************************
                  ヘ ッ ダ ー
********************************/
.header { padding: 1.0rem; font-size: 0; background-color: #F7F8F8; margin-top: 80px; background: url("../img/bg.jpg") center/cover no-repeat; background-attachment: fixed;}
.header h1 { font-size: 0;}
@media(min-width:576px){
	.header { padding: 0; padding-top: 1.0rem; padding-bottom: 1.0rem;}
}

.twt { font-size: 0; background-color: rgba(0,0,0,0.70);  }
.twt a { width: 100%; height: 100%;  }

#slick { margin-top: 0.75rem; font-size: 0px; display: none;}
#slick li img { padding:0 0.25rem; width: 100%;}

#slick.slick-initialized { display: block;}


/********************************
                   コ ン テ ン ツ
********************************/
#about, #medama, #event, #fair, #clinic, #venue, #shop, #campaign, #oshirase, #movie { margin-top: -80px; padding-top: 80px;}

.box { padding-top:3.0rem; padding-bottom: 3.0rem; }
.container-fluid.box { background-color: #F8F8F8;}

.box h2 { font-size:1.0rem; font-family: 'Raleway', 'Roboto', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; font-weight: 500; margin-bottom: 1.0rem; }
.box h2 span { font-size:3.0rem; font-weight:700; line-height:2.7rem; position: relative;}
.box h2 span::after { width: 100%; margin: 0; padding: 0; content: ""; background-color: #e60012; height: 0.15rem; border-radius: 0.075rem; position: absolute; bottom: 0; left: 0;}

p.about { font-size: 1.0rem; font-weight: 500; line-height: 1.8rem; word-break: normal; line-break:strict;}
p.about a, p.about a:visited {color: #09F; text-decoration: underline;}

.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 .img { width: 100%; transition: 0.4s; border-bottom: solid 1px #EEE; padding: 0.5rem; min-height: 0%; }
.segment .img img { width: 100%; flex-shrink: 0; }
#fair .segment .img {margin-bottom: 0.5rem;}

.segment p.date { font-size: 1.0rem; margin: 0.5rem auto; text-align: center;}
.segment p.date span { padding: 0 0.75rem;  color: #FEFEFE; line-height: 1.6rem; border-radius: 0.8rem; display: inline-block;}

.segment p.title { font-size: 1.0rem; line-height: 1.4rem; font-weight: 700; margin: 0; padding:0.5rem 1.0rem; transition: 0.4s; }
.segment p.title span { font-size: 0.8rem;}

.segment p.caption { font-size: 0.8rem; line-height: 1.2rem; padding:0.5rem 1.0rem; margin-bottom: 0.5rem; min-height: 4.0rem; }
.segment p.detaile { font-size: 0.8rem;  margin-top: auto; text-align: right; padding: 1.0rem; transition: 0.4s; border-top: solid 1px #EEE;}
.segment p.detaile span { float: left; color: #FF0000; text-decoration: underline;}

.segment p.date span.all { background-color: #39B54A;; }
.segment p.date span.fri { background-color: #FF9900; }
.segment p.date span.sat { background-color: #00A4FF; }
.segment p.date span.sun { background-color: #e60012; }

.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 p.title, .segment:hover p.detaile { color: #09F;}


/***注意事項***/
.attention, .notice { width: 100%; font-size: 0; }
.attention { background-color: #FEFEFE; border: solid 1px #DDD; padding: 1.5rem; margin-top: 1.0rem;}
.attention h3 { font-size: 1.2rem; font-weight: 500; border-left: solid 0.5rem #D31458; border-bottom: solid 1px #D31458; text-indent: 0.5rem; line-height: 2.0rem; margin-bottom: 0.5rem; margin-top: 0.5rem;}
.attention:first-child { margin-top: 0;}
.attention p, .notice { font-size: 1.0rem; line-height: 1.75rem; }
.attention p span, .notice span { font-weight: 700;}

.oshirase { font-size: 1.2rem; font-weight: 700; padding: 0.5rem 1.0rem; border: solid 2px #FF0000; position: relative; transition: .4s; color: #FF0000;}
.oshirase a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
.oshirase:hover { background-color: #FEFEFE;}
@media(min-width:992px){.oshirase { text-align: center;}}
#oshirase h2 span {font-size: 2.0rem; font-weight: 700; border-bottom: solid 0.15rem #e60012;}
#oshirase h2 span::after { display: none;}
#oshirase h3 {font-size: 1.6rem; font-weight: 700;}

.corona {background-color: #EEE; border: solid 1px #666;}
.corona li {padding-left:1.0rem; text-indent:-1.0rem; font-size:1.0rem;}
.corona li span { font-weight: 700;}

/********************************
                      店 舗 情 報
********************************/
.venue { padding-top: 0.8rem;}
.venue h3 { font-size: 1.2rem; font-weight: 700; }
.venue h3 span { font-size: 0.8rem; font-weight: 400; }
.venue p { font-size: 1.0rem; font-weight: 400;}

.venue .shoplist li { width: 100%; font-size: 1.0rem; font-weight: 400;}
.venue .shoplist li span {font-size: 1.2rem; font-weight: 500;}

.access { display: flex; flex-wrap: wrap;}
.access li {width:40%; border-bottom:dashed 1px #333; font-size: 1.0rem; font-weight: 400; }
.access li:first-child { width: 100%!important; border-bottom: none; font-size: 1.2rem; font-weight: 500;}
.access li:nth-child(even) { width:60%; }
	@media(min-width:576px){
		.access li { width:35%; }
		.access li:nth-child(even) { width:65%; }
	}
	@media(min-width:768px){
		.access li { width:37%; }
		.access li:nth-child(even) { width:63%; }
	}
	@media(min-width:992px){
		.access li { width:40%; }
		.access li:nth-child(even) { width:60%; }
	}

#sponsors a:hover img { opacity: 0.6!important;}

/***埋め込み系***/
.embed { position: relative; width: 100%; padding-top: 56.25%; }
.embed iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }