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

body{
    font-family: 'FOT-筑紫A丸ゴシック Std E', sans-serif;
}

.red{
    color: #F81014;
}
.contents .visual{
    margin-bottom: 0;
}

.contents .visual > img{
    width: 100%;
}

.contents main > section#event {
    padding: 0;
}

.band{
    background-color: #e4daca;
    padding: 20px 0;
}

.band h3{
    text-align: center;
    font-size: 128%;
    letter-spacing: 0.1em;
}

#event .band h3{
    line-height: 1.8;
}

.endmessage{
    font-size: 114%;
    margin-top: 20px;
}

.guide h2.title{
    font-size: 164%;
    text-align: center;
    margin-bottom: 40px;
    line-height: 2;
}

.guide p.catch{
    text-align: center;
    font-size: 124%;
    font-weight: 700;
    line-height: 2.7;
}
.guide p.notetext{
    text-align: center;
    width: 60%;
    margin: auto;
    margin-bottom: 2em;
    color: #666666;
}


.guide p.text{
    text-align: center;
    width: 60%;
    margin: auto;
    color: #666666;
}

.guide p.movie{
    margin-top: 60px;
    text-align: center;
}

.guide p.text span a{
    color: #e92b90;
}
.guide p.text span a:hover{
    opacity: 0.8;
}

.anker{
    border-bottom: 2px solid #d9d9d9;
    margin-bottom: 50px;
}

.anker ul.ankerlist{
    display: flex;
    align-items: center;
    justify-content: center;
}

.anker ul.ankerlist li a{
    display: block;
    padding: 15px 20px;
    position: relative;
}
.anker ul.ankerlist li a small{
    display: block;
    text-align: center;
}

.anker ul.ankerlist li a:before{
    content:"";
    display:inline-block;
    width:2px;
    height:52px;
    background-color:#d9d9d9;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.anker ul.ankerlist li a:after{
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
}


.anker ul.ankerlist li.commingsoon {
    opacity: 0.4;
}
.anker ul.ankerlist li.commingsoon a{
    cursor: default;
    pointer-events: none;
}

#map{
	width: 100%;
	height: 480px;
	/* margin-bottom: 80px; */
    border-bottom: 2px solid #d9d9d9;
}

.mapFukidashi{
	width:224px;
}
	.mapFukidashi .pseudoTable{
		width: 100%;
	}
	.mapFukidashi .pseudoTable .explain{
		padding-right: 8px;
		vertical-align: top;
	}
	.mapFukidashi .pseudoTable .image{
		margin: 0;
		vertical-align: top;
	}

	.mapFukidashi p{
		line-height: 1.3;
		margin-bottom: 8px;
	}
	.mapFukidashi p.name{
		font-weight: 700;
		color: #0071BB
	}
	.mapFukidashi p.name a{
		color: #0071BB
	}
	.mapFukidashi p.period{
		font-weight: 700;
		color: #000000
	}
	.mapFukidashi p.access{
		font-size: 1.1rem;
		color: #666666
	}


.map{
    padding-bottom: 80px;
    border-bottom: 2px solid #d9d9d9;
}

/*
section.vol + section.vol{
    margin-top: 80px;
}
*/

section.vol{
    padding: 80px 0;
    border-bottom: 2px solid #d9d9d9;
}

.leftarea{
    width: 47%;
    float: left;
    padding: 35px;
    box-sizing: border-box;
}

/*
section.vol section.details{
    padding: 80px 0;
    border-bottom: 2px solid #d9d9d9;
}
*/

section.vol .eventwrap{
    margin-bottom: 50px;
}
section.vol .eventwrap:after{
    content: "";
    display: block;
    clear: both;
}

section.vol .explain{
    width: 48%;
    float: right;
}

section.vol .explain h3{
    font-size: 171%;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

section.vol .explain h3 span{
    font-size: 58%;
    display: block;
    margin-top: 10px;
    padding-bottom: 10px;
}

section.vol .explain .end{
    background: #d2375e;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 20px;
}

section.vol .explain ul.matter{
    margin-bottom: 35px;
    font-weight: 700;
}

section.vol .explain ul.matter li{
    margin-bottom: 20px;
}
section.vol .explain ul.matter li.none{
    display: none;
}
section.vol .explain ul.matter li dl dt{
    background: #4c4c4c;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    border-radius: 7px;
}

section.vol .explain ul.matter li dl dt.attention{
    background: #BD3661;
}

section.vol .explain ul.matter li.inline dl dt{
    margin-right: 20px;
	vertical-align: top;
}
section.vol .explain ul.matter li.inline dl dd{
    display: inline-block;
	line-height: 1.4;
}

section.vol .explain ul.matter li.inline dl dd.date{
    font-size: 128%;
    font-weight: 700;
}
section.vol .explain ul.matter li.inline dl dd.contact a:hover{
    color: #333;
}
section.vol .explain ul.matter li.inline dl dd.contact a.mouse-over:hover{
    color: #e92b90;
}

section.vol .explain ul.matter li.block dl dt{
    margin-bottom: 10px;
}

section.vol .explain ul.matter li.block dl dd{
    font-size: 85%;
}
section.vol .explain ul.matter.plan {
    margin-bottom: 0;
}

section.vol .explain .plan + .plan{
    margin-top: 28px;
}

section.vol .explain .plan dl dt{
    background: #0072be;
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    border-radius: 7px;
    margin-bottom: 10px;
    font-weight: 700;
}

section.vol .explain .plan dl dd ul.list{
    margin-bottom: 15px;
}

section.vol .explain .plan dl dd ul.list li{
    font-size: 85%;
    font-weight: 700;
}
section.vol .explain ul.list li{
    text-indent: -1em;
    padding-left: 1em;
}
section.vol .explain .plan dl dd ul.list li.space{
	margin-top: 1em;
}

section.vol .explain .plan dl dd ul.list li.paymentComment,
section.vol .explain .plan ul.list li.paymentComment{
	color: #F81014;
    font-size: 85%;
    font-weight: 700;
}
section.vol .explain .plan dl dd ul.list li.paymentComment p.buttonStyle,
section.vol .explain .plan ul.list li.paymentComment p.buttonStyle{
	text-align: left;
}


section.vol .explain .plan .border{
    border: 1px solid #d9d9d9;
    padding: 10px 20px;
}


section.vol .explain .plan .border + .border{
	margin-top: 10px;
}

section.vol .explain .plan .border p,
section.vol .explain .plan .border li{
    margin-bottom: 0;
    font-size: 85%;
    font-weight: 700;
}

section.vol .explain .plan .border p span.blue{
    color: #0072be;
    display: block;
}
section.vol .explain .plan .border p a,
section.vol .explain dd a{
	text-decoration: underline;
}
.contents .buttonStyle {
    clear: both;
}

.contents .buttonStyle a{
    border-radius: 50px;
    letter-spacing: 0.1em;
    font-size: 85%;
}

ul.btn{
    display: flex;
    justify-content: center;
}

ul.btn li{
    margin: 0 20px;
}

ul.btn li.cart{
    display: none;
}

.leftarea{
    position: relative;
}

.vol .leftarea:before,
.vol .leftarea:after{
    content: "";
    position: absolute;
    z-index: -1;
}

/*
#event1 .leftarea:before{
    left: 0;
    top: 0;
    width: 69px;
    height: 295px;
    background: url("../../images/okayama_dc2022/tape1.png") no-repeat;
}

#event1 .leftarea:after{
    width: 69px;
    height: 295px;
    background: url("../../images/okayama_dc2022/tape1.png") no-repeat;
    right: 5px;
    bottom: 25px;
}

#event2 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape2.png") no-repeat;
    width: 61px;
    height: 181px;
    left: 0;
    top: 0;
}

#event2 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape2.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 181px;
}
#event3 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape3.png") no-repeat;
    width: 61px;
    height: 181px;
    left: 0;
    top: 0;
}

#event3 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape3.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 181px;
}
#event4 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape4.png") no-repeat;
    width: 61px;
    height: 276px;
    left: 0;
    top: 0;
}

#event4 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape5.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 276px;
}

#event5 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape6.png") no-repeat;
    width: 61px;
    height: 276px;
    left: 0;
    top: 0;
}

#event5 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape6.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 276px;
}

#event6 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape7.png") no-repeat;
    width: 61px;
    height: 181px;
    left: 0;
    top: 0;
}

#event6 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape7.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 181px;
}

#event7 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape8.png") no-repeat;
    width: 61px;
    height: 321px;
    left: 0;
    top: 0;
}

#event7 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape8.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 321px;
}

#event8 .leftarea:before{
    background: url("../../images/okayama_dc2022/tape9.png") no-repeat;
    width: 61px;
    height: 236px;
    left: 0;
    top: 0;
}

#event8 .leftarea:after{
    background: url("../../images/okayama_dc2022/tape9.png") no-repeat;
    right: 5px;
    bottom: 25px;
    width: 61px;
    height: 236px;
}

#eventCat1 section h3{
    position: relative;
    padding-right: 75px;
}
#eventCat1 section h3:after{
    position: absolute;
    bottom:10px;
    right: 0;
    content: "";
    display: inline-block;
    width: 70px;
    height: 70px;
    background: url("../../images/okayama_dc2023/hiruzen.svg") 0 0 no-repeat;
    background-size: 100% auto;
}
*/

.slick-dots {
    bottom: -60px;
}

.slick-dots li button:before {
    font-size: 30px;
}

#relatedEvents .comingsoon{
	margin: 60px 0;
}

#event .notes {
	margin-top: 60px;
}

#payment .lead{
	margin-top: 60px;
	padding-bottom: 30px;
	margin-bottom: 40px;
	border-bottom: 1px solid #d9d9d9;
}

#payment {
    padding-bottom: 80px;
}
#payment .band h3{
    line-height: 1.5;
}

#payment .paymentlist h4{
	font-size: 128%;
	margin-bottom: 15px;
}





/* SP用
-------------------------------------------- */
	
@media only screen and (max-width: 767px) {
.contents .visual {
    margin-bottom: 0;
}
    
.guide h2.title {
    font-size: 144%;
    line-height: 1.6;
}

.guide p.catch {
    font-size: 114%;
    line-height: 1.6;
    text-align: left;
}

.guide p.notetext,
.guide p.text {
    text-align: left;
    line-height: 1.6;
    width: auto;
}

.guide p.movie{
    margin-top: 60px;
    text-align: center;
}
.guide p.movie iframe{
    width: 100%;
    height: 194px;
}

.band {
    background-size: cover;
}

.anker ul.ankerlist {
    flex-wrap: wrap;
}

.anker ul.ankerlist li{
    width: 50%;
    text-align: center;
}

.anker ul.ankerlist li a {
    padding: 15px;
}

.anker ul.ankerlist li:nth-child(2n) a:before {
    display: none;
    }

    
.leftarea {
    width: 100%;
    float: none;
    padding-top: 0;
}

/*
section.vol + section.vol{
    margin-top: 40px;
}
*/

section.vol{
    padding: 40px 0;
}

/*
section.vol section.details{
    padding: 40px 0;
}
*/

section.vol .eventwrap {
    margin-bottom: 10px;
}
    
section.vol .explain {
    width: auto;
    float: none;
}

section.vol #event2 .explain {
    padding-top: 30px;
}

section.vol .explain .plan + ul.matter {
    margin-bottom: 0;
}

.slick-dots {
    bottom: -45px;
}
.slick-dots li {
    margin: 0;
}

ul.btn {
    display: block;
}

ul.btn li{
    margin-bottom: 10px;
}

.contents ul.btn li a {
    padding: 10px 20px;
    width: 100%;
}

#event .notes {
	margin-top: 40px;
}

#payment {
    padding-bottom: 50px;
}
#payment .lead {
    margin-top: 40px;
}




}