/*======================================================================
TOPPAGE
======================================================================*/
#toppage { display: flex; flex-direction: column; padding-top: 20px; overflow-x: hidden;}
#toppage h2 {
    display: flex; line-height:46px;
    padding-left: 50px;
    background: url("../img/h2_bg1.png") no-repeat left center;
    background-size:auto 46px;
}
#toppage h2 b {
    position: relative;
    margin-right: 50px;
    font-size: 287.5%;
    font-weight: normal;
    color: #332073;
}
#toppage h2 b::before {
    position: absolute; bottom: 0; right:-25px;
    display: block; clear: both; content:"";
    width: 1px; height: 35px;
    background: #ddd;
    transform: rotate(35deg);
}
#toppage h2 small {
    position: relative; top: 8px;
    font-size: 100%;
    font-weight: normal;
}
#toppage  h3 {}
#toppage  h3 b,
#toppage  h3 small { display: block; text-align: center;}
#toppage  h3 b {
    font-size: 225%;
    font-weight: normal;
    color: #332073;
}
#toppage  h3 small {
    font-size: 87.5%;
    font-weight: normal;
}
#toppage .b_more1 { width: 147px;}
#toppage .b_more1 a {
    display: block;
    padding:  0 0 15px;
    color: #333;
    letter-spacing: 2px;
    text-decoration: none;
    background: url("../img/arrow.png") no-repeat left bottom;
}
#toppage .b_more2 {
    width:90%; max-width: 295px;
    margin: auto;
}
#toppage .b_more2 a {
    display: block;
    padding: 15px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background: #CFBD44;
    border-radius: 50px;
}
@media only screen and (min-width:768px){
    #toppage .b_more1 a:hover,
    #toppage .b_more2 a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #toppage h2 {
        padding: 55px 0 0;
        flex-direction: column;
        line-height:36px;
        text-align: center;
        background-position: top center;
    }
    #toppage h2 b::before { display: none;}
    #toppage h2 b { font-size: 225%; margin: 0;}
    #toppage h2 small { font-size: 87.5%; top: 0;}
}
@media only screen and (max-width:468px){
    #toppage h2 { line-height:26px;}
    #toppage h2 b { font-size: 162.5%;}
    #toppage h2 small { font-size: 62.5%;;}
}


/*---------------------------------------------------------------------------
    MAINIMG
---------------------------------------------------------------------------*/
#toppage .mainimg  { padding:  0 0 80px;}
#toppage .mainimg .inner  { position: relative; width: 100%; max-width: 1250px;}
#toppage .mainimg .inner::before,
#toppage .mainimg .inner::after  {
    display: block; clear: both; content:"";
    position: absolute; 
}
#toppage .mainimg .inner::before {
    top:260px;
    left: -213px;
    width: 350px;
    height: 410px;
    background: url("../../img/site1/bg1.png") no-repeat;
    background-size:100%;
    opacity:0.8
}
#toppage .mainimg .inner::after  {
    bottom:-151px;
    right: -389px;
    width: 550px;
    height: 586px;
    background: url("../../img/site1/bg2.png") no-repeat;
    background-size:100%;
    opacity:0.8;
}
#toppage .mainimg .main_slider { position: relative; z-index: 999;}
#toppage .mainimg .main_slider img  { border-radius: 20px;}
#toppage .mainimg .time {
    position: absolute; bottom: -120px; right: 20px;
    padding-top: 62px;
    width: 300px; height: 245px;
    text-align: center;
    background: url("../../img/site1/open.png") no-repeat top center;
    background-size: 100% auto;
    z-index: 999;
}
#toppage .mainimg .time a {display: block; text-decoration: none; color: #333;}
#toppage .mainimg .time span,
#toppage .mainimg .time b,
#toppage .mainimg .time small { display: block; margin: auto; max-width: 170px;}
#toppage .mainimg .time span:nth-child(1) { font-size:87.5%;}
#toppage .mainimg .time span:nth-child(2) { 
    margin-bottom: 5px;
    padding: 5px 0;
    font-size: 112.5%;
    border-bottom: 1px solid #333;
}
#toppage .mainimg .time span:nth-child(3) b {
    font-family: 'Roboto', sans-serif;
/*    font-size:187.5%; */
	font-size:182.5%;
    font-weight: 600;
}
#toppage .mainimg .time span:nth-child(4) {
    margin-top: 5px;
    color:#B796E9;
}
@media only screen and (max-width:768px){
    #toppage .mainimg .time {
        position: absolute; bottom: -200px; right: 20px;
    }
}
@media only screen and (max-width:468px){
    #toppage .mainimg  { padding:  0 2% 40px;}
    #toppage .mainimg .inner::before {
        top:-20px; left: -100px;
        width: 200px; height: 145px;
        background-size: 200px 145px;
    }
    #toppage .mainimg .inner::after  {
        bottom:-150px; right: -80px;
        width: 200px; height: 195px;
        background-size: 200px 195px;
    }
    #toppage .mainimg .time {
        bottom: -170px; right: 0;
        padding-top: 40px;
        width: 200px; height: 187px;
        font-size: 62.5%;
    }
    #toppage .mainimg .time span,
    #toppage .mainimg .time b,
    #toppage .mainimg .time small { max-width: 100px;}    
}


/*---------------------------------------------------------------------------
    EVENT
---------------------------------------------------------------------------*/
#toppage .event {
    padding: 100px 0;
    background: url("../../img/site1/bg_event.jpg") no-repeat;
    background-size: cover;
}
#toppage .event .inner { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap:60px;}
#toppage .event .inner::before,
#toppage .event .inner::after  {
    display: block; clear: both; content:"";
    position: absolute; 
}
#toppage .event .inner::before {
    top:0; right:-150px;
    width:318px; height: 133px;
    background: url("../../img/site1/kazari1.png") no-repeat;
}
#toppage .event .inner::after {
    bottom:-50px; left:-200px;
    width:274px; height: 96px;
    background: url("../../img/site1/kazari2.png") no-repeat;
}
#toppage .event .box { position: relative; z-index: 9; display: flex; flex-wrap: wrap; gap:60px;}
#toppage .event .box .photo { width: 50%;}
#toppage .event .box .photo img { width: 100%; height: auto; border-radius: 30px;}
#toppage .event .box .naiyou {
    display: flex; flex-direction: column; gap:30px;
    width: calc(50% - 60px);
}
#toppage .event .box .cate {
    position: relative;
    width: 190px;
    padding:10px 15px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background: #CFBD44;
    border-radius: 50px;
}
#toppage .event .box .cate::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; bottom: 0; right: -30px;
    margin: auto;
    width: 15px; height: 15px;
    background: #CFBD44;
    border-radius: 15px;
}
#toppage .event .box .mid { display: flex; flex-direction: column; gap:5px;}
#toppage .event .box .mid b,
#toppage .event .box .mid small { display: block;}
#toppage .event .box .mid b { font-size: 225%;}
#toppage .event .box .mid small { font-size: 125%;}
#toppage .event .box .day { margin-top: 10px;}
#toppage .event .box .come { font-size: 112.5%; line-height: 200%;}
@media only screen and (min-width:768px){
    #toppage .event .box .more a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #toppage .event .inner { flex-direction: column;}
    #toppage .event .box { flex-direction: column;}
    #toppage .event .box .photo { width:100%;}
    #toppage .event .box .naiyou { width:100%;}
}
@media only screen and (max-width:468px){
    #toppage .event { padding: 140px 0 70px;}
    #toppage .event .inner::before {
        top:-50px; right:-50px;
        width:170px; height: 71px;
        background-size: 170px 71px;
    }
    #toppage .event .inner::after {
        bottom:-100px; left:-50px;
        width:150px; height: 53px;
        background-size: 150px 53px;
    }    
    #toppage .event .box .mid b { font-size: 137%;}
    #toppage .event .box .mid small { font-size:100%;}
    #toppage .event .box .come { font-size: 100%;}
}


/*---------------------------------------------------------------------------
    ABOUT
---------------------------------------------------------------------------*/
#toppage .about { padding: 150px 0;}
#toppage .about .inner { display: flex; flex-direction: column; gap:60px;}
#toppage .about .come { font-size: 112.5%; line-height: 200%;}

#toppage .about .come .about_img{
	width:300px;
	float:right;
	margin-left:20px;
}


@media only screen and (max-width:468px){
    #toppage .about .come { font-size: 100%;}

	#toppage .about .come .about_img{
		width:100%;
		float:none;
		margin:auto;
	}

}


/*---------------------------------------------------------------------------
    NEWS
---------------------------------------------------------------------------*/
#toppage .news {
    padding: 100px 0;
    background: url("../../img/site1/bg_event.jpg") no-repeat;
    background-size: cover;
}
#toppage .news .inner { position: relative; display: flex; flex-direction: column; gap:60px;}
#toppage .news .inner::before,
#toppage .news .inner::after  {
    display: block; clear: both; content:"";
    position: absolute; 
}
#toppage .news .inner::before {
    top:-80px; right:0;
    width:300px; height: 300px;
    background: url("../../img/site1/kazari4.png") no-repeat;
    background-size: 300px auto;
}
#toppage .news dl {
    position: relative;
    display: flex; gap:20px;
    padding: 30px 0;
    border-bottom: 1px solid #ddd;
}
#toppage .news dt {
    position: relative;
    margin-top: 5px;
    width: 190px;
    line-height: 30px;
}
#toppage .news dt::before {
    position: absolute; top: 0; right: 0;
    display: block; clear: both; content:"";
    width: 26px; height: 26px;
    background: #B796E9 url("../img/icon_arrow_w.png") no-repeat center center;
    background-size: 20px auto;
    border-radius: 50px;
}
#toppage .news dd { width:calc(100% - 190px - 20px); font-size: 112.5%; line-height: 200%;}
#toppage .news dd a {  color: #333; text-decoration: none;}
@media only screen and (min-width:768px){
    #toppage .news dd a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .news .inner { gap:30px;}
    #toppage .news .inner::before { right:-100px; }
    #toppage .news dl { flex-direction: column; gap:10px;}
    #toppage .news dt::before  { width:20px; height:20px;}
    #toppage .news dt { line-height: 20px;}
    #toppage .news dd { width:100%; font-size: 100%;}
}


/*---------------------------------------------------------------------------
    SCHEDULE
---------------------------------------------------------------------------*/
#toppage .schedule { padding: 150px 0;}
#toppage .schedule .inner { position: relative; display: flex; flex-wrap: wrap; gap:60px;}
#toppage .schedule .inner::before  {
    display: block; clear: both; content:"";
    position: absolute; 
}
#toppage .schedule .inner::before {
    bottom:-100px; right: -100px;
    width: 274px; height: 96px;
    background: url("../../img/site1/kazari3.png") no-repeat;
}
#toppage .schedule h2 { width: 100%;}

/* DETAIL */
#toppage .schedule .detail {
    display: flex; flex-direction: column; gap:30px;
    padding-top: 40px;
    width: calc(100% - 450px - 60px);
}
#toppage .schedule .detail .mid { display: flex; flex-direction: column; gap:5px;}
#toppage .schedule .detail b { font-size: 225%;}
#toppage .schedule .detail .come { font-size: 112.5%; line-height: 200%;}
#toppage .schedule .detail table { 
	border:1px solid #ddd;
	border-collapse:collapse;
}
#toppage .schedule .detail table th,
#toppage .schedule .detail table td {
    padding:7px 15px;
    text-align: center;
	border:1px solid #ddd;
}
#toppage .schedule .detail th { text-align: left; font-weight: normal; background:#F7F4ED;}

/* CALENDAR */
#toppage .schedule .calendar {
    display: flex; flex-direction: column; gap:20px;
    position: relative;
    margin:0 auto;
    padding: 50px 25px;
    width:450px;
    background: #F7F4ED;
    border-radius: 30px;
}
#toppage #calendar ul.month { 
    display:flex; justify-content: space-between;
    padding:0 20px 20px;
}
#toppage #calendar  ul.month li.today { 
    font-size:150%;
    font-weight: 700;
    color: #332073;
}
#toppage #calendar ul.month li.prev,
#toppage #calendar ul.month li.next { width: 70px; }
#toppage #calendar ul.month li.prev a,
#toppage #calendar ul.month li.next a {
    display:block;
    padding:5px;
    font-size: 87.5%;
    color: #332073;
    text-align: center;
    text-decoration: none;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    border-radius: 50px;
}
#toppage #calendar ul.month li.prev a {
    background: rgba(51,32,115,0.05) url("../img/icon_prev_p.png");
    background-position: left center;
}
#toppage #calendar ul.month li.next a {
    background: rgba(51,32,115,0.05) url("../img/icon_next_p.png");
    background-position: right center;
}
#toppage #calendar  ul.week {
    display: flex; flex-wrap: wrap; gap: 10px 0; padding: 20px 20px 0;
    border-top: 1px solid #ddd;
    color: #332073;
    font-weight: bold;
}
#toppage #calendar ul.week li { width:14.28%; text-align: center; }
#toppage #calendar ul.day {
    display: flex; flex-wrap: wrap; gap: 20px 0; padding:20px;
}
#toppage #calendar ul.day li { width:14.28%; text-align: center;}
#toppage #calendar ul.day li span,
#toppage #calendar ul.day li a {
    display: block;
    margin: 0 auto;
    width: 45px; height: 45px; line-height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size:20px; font-weight: 400;
    text-align: center;
    color: #222;
    background: #fff;
    border-radius: 45px;
}

#toppage #calendar ul.day li .cal_sun span ,
#toppage #calendar ul.day li a.cal_sun{
	background-color:#D06245;
	color:#FFF;
}


#toppage #calendar ul.day li a {
    color: #fff;
    text-decoration: none;
/*    background: #D06245; */
	background:#CFBD44;
}
@media only screen and (min-width:768px){
    #toppage #calendar ul.month li.prev a:hover { opacity: 0.7;}
    #toppage #calendar ul.month li.next a:hover { opacity: 0.7;}
    #toppage #calendar ul.day li a:hover { opacity: 0.7;}
}
@media only screen and (max-width:968px){
    #toppage .schedule .detail { width: calc(100% - 290px - 60px); }
    #toppage .schedule .calendar { width:290px;}
    #toppage #calendar ul.month { padding:  0 0 20px;}
    #toppage #calendar ul.month li.today { font-size:125%;}
    #toppage #calendar ul.month li.prev,
    #toppage #calendar ul.month li.next { width: 30px;}
    #toppage #calendar ul.month li.prev a,
    #toppage #calendar ul.month li.next a {
        display:block;
        width: 30px; height: 30px;
        text-indent: -9999px;
        background-position: center center;
        box-sizing: border-box;
    }
    #toppage #calendar ul.week {padding: 20px 0 0;}
    #toppage #calendar ul.day { padding:20px 0 0; gap: 10px 0;}
    #toppage #calendar ul.day li span,
    #toppage #calendar ul.day li a {
        width: 30px; height: 30px; line-height: 30px;
        font-size:87.5%; font-weight: 400;
    }
}
@media only screen and (max-width:768px){
    #toppage .schedule .detail,
    #toppage .schedule .calendar { width: 100%;}
}
@media only screen and (max-width:468px){
    #toppage .schedule { padding: 100px 0;}
    #toppage .schedule .inner::before {
        bottom:-80px; right: -50px;
        width: 150px; height: 53px;
        background-size: 150px 53px;
    }
    #toppage .schedule .detail b { font-size: 137%;}
    #toppage .schedule .detail .come { font-size:100%;}
    #toppage .schedule .detail table { font-size: 75%;}
}


/*---------------------------------------------------------------------------
    BANNER
---------------------------------------------------------------------------*/
#toppage .banner { padding: 0 0 150px;}
#toppage .banner .inner { position: relative; display: flex; flex-wrap: wrap; gap:20px;}
#toppage .banner .inner::before,
#toppage .banner .inner::after  {
    display: block; clear: both; content:"";
    position: absolute; 
}
#toppage .banner .inner::before {
    top:-63px;
    left: -180px;
    width: 200px;
    height: 175px;
    background: url("../../img/site1/bg3.png") no-repeat;
    background-size:100%;
    opacity:0.8;
}
#toppage .banner .inner::after  {
    top:-86px;
    right: -206px;
    width: 300px;
    height: 400px;
    background: url("../../img/site1/bg4.png") no-repeat;

    background-size:100%;
    opacity:0.8;

}
#toppage .banner p { position: relative; width: calc(20% - 16px); z-index: 9;}
#toppage .banner p img { width:100%; height: auto;}
@media only screen and (max-width:768px){
    #toppage .banner { padding: 0 0 70px;}
}
@media only screen and (max-width:468px){
    #toppage .banner p { width: calc(50% - 10px);}
    #toppage .banner .inner::before {
        top:-50px;
        left: -120px;
        width: 200px;
        height: 167px;
        background-size:200px 167px;
    }
    #toppage .banner .inner::after  {
        top:auto;
        right: -100px;
        bottom:-70px;
        width: 200px;
        height: 241px;
        background-size:200px 241px;
    }
}


/*---------------------------------------------------------------------------
    ACCESSMAP
---------------------------------------------------------------------------*/
#toppage .accessmap { position: relative;}
#toppage .accessmap iframe { width: 100%; height: 500px; }



#toppage .schedule .detail b a{
	color:#333;
}