@charset "utf-8";
/*************************************************
 top.css
**************************************************/

/* 基本スタイル */
.top_section { padding: 1em 0;}


.more_link { display: flex; justify-content: center;}
.more_link a { text-decoration: none; padding: 0.9em 3.3em 0.9em 0.3em; font-size: 1.2em; color: #000; border-bottom: 1px dotted #000; background: url("../img/arrow_common01.png") right 0.3em center no-repeat;}
.more_link a:hover,
.more_link a:focus { background-color: #FCFAF8;}

.row02,
.row04{ display: flex;}

.row02 .row_wrap { width: 48%; margin: 0 1% 2em;}

.row04 .row_wrap { width: 23%; margin: 0 1% 2em;}


/* ヘッダー */
.top header { min-height: 828px;}


/* 01 ------- */
.sec_01 {}
.sec_01 img { max-width: 100%; height: auto;}
.sec_01 .row02 {}
.sec_01 .row_wrap { position: relative; margin-top: 50px; padding: 20px; background-color: #fff; overflow: visible;}
.sec_01 .row_wrap:before { position: absolute; display: block; content: ""; top: -50px; left: 0px; right: 0px; height: 100px; background-color: #fff; border-radius: 100% 100% 0 0; z-index: 1;}
.sec_01 .row_wrap .row_wrap_inner { position: relative; padding: 0; z-index: 5;}

.sec_01 .easy_search_wrap h2,
.sec_01 .easy_search_wrap .easy_search { margin-left: 20px; margin-right: 20px;}

.easy_search {}
.easy_search p { margin: 0; padding: 0 1em;}
.easy_search_inner { display: flex; align-items: stretch; width: 100%;}
label.easy_search_txt { display: block; width: 0px; height: 0px; overflow: hidden;} 
form input.easy_search_txt,
form input.easy_search_bt { padding: 0.8em 0.5em 0.7em; font-size: 1.2em; border: none; border-radius: 0.5em;}
form input.easy_search_txt { width: calc(100% - 5em - 10px); margin-right: 10px; background-color: #ECE4D4;}
form input.easy_search_bt { width: 5em; margin: 0; color: #fff; background-color: #333; cursor: pointer;}
form input.easy_search_bt:hover,
form input.easy_search_bt:focus { background-color: #C00000;}

.button_icon { padding-bottom: 0;}
.button_icon ul { display: flex; margin: 0;}
.button_icon li { width: calc( 100% - 40px); margin: 20px;}
.button_icon a { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 1.2em; color: #000; text-decoration: none; background: linear-gradient( -55deg, #E5D7BE, #E5D7BE 5em, #ECE4D4 5em, #ECE4D4); border-radius: 0.75em;}
.button_icon a:hover,
.button_icon a:focus {background: linear-gradient( -55deg, #D4C8B3, #D4C8B3 5em, #E3D6BF 5em, #E3D6BF);}


.button_icon a:before { position: absolute; display: block; content: ""; width: 74px; height: 74px; top: 10px; left: 50%; margin-left: -37px;  border-radius: 50%; background: #fff center center no-repeat;}

.button_icon .button_icon_text { padding: 94px 0.5em 1em; }
.button_icon01 a:before { background-image: url("../img/top_ico_reserve.png");}
.button_icon02 a:before { background-image: url("../img/top_ico_calendar.png");}

.mypage_wrap {}
.button_mypage { display: block; margin: 0 20px 20px;  padding: 1.75em 0.5em; text-align: center; background: linear-gradient( -45deg, #E5D7BE, #E5D7BE 7.5em, #ECE4D4 7.5em, #ECE4D4); border-radius: 0.5em;}
.button_mypage:hover,
.button_mypage:focus { background: linear-gradient( -45deg, #D4C8B3, #D4C8B3 7.5em, #E3D6BF 7.5em, #E3D6BF);}

.mypage_list { margin: 0; padding: 0;}
.mypage_list ul { display: flex; align-items: stretch; flex-wrap: wrap; margin: 0; padding: 0;}
.mypage_list li { width: calc(50% - 40px); margin: 0px 20px 20px;}
.mypage_list a { display: block; height: 100%; padding: 0.8em 36px 0.8em 1em; font-size: 1.1em; text-decoration: none; color: #000; background: url("../img/arrow_common01.png") right 10px center no-repeat #ECE4D4; border-radius: 0.5em;}
.mypage_list a:hover,
.mypage_list a:focus { background-color: #E3D6BF;}



/* 02 ------- */
.sec_02 { padding: 0;}
.sec_02 .wrap { width: auto; padding: 0; background: linear-gradient( 90deg, #ECE4D4, #ECE4D4 50%, #E4D7BD 50%, #E4D7BD);}
.status_wrap { max-width: 1160px; margin: 0 auto; padding-bottom: 0;}
.status_wrap .row_wrap { display: flex; justify-content: space-around; align-items: flex-start; width: 50%; margin: 0; padding: 0;}
.status_wrap h2 { position: relative; width: 7em; padding: 2em 1em 3em; font-size: 1.3em; font-weight: normal; background: url("../img/title_status_bg.png") center bottom no-repeat; background-size: cover;}
/*
.status_wrap h2:before,
.status_wrap h2:after { position: absolute; display: block; content: "";}
.status_wrap h2:before,
.status_wrap h2:after {
  bottom: -30px; left: 0%;
  border-top: 15px solid #fffF;
  border-right: 1.75em solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 1.75em solid #fff;
}
.status_wrap h2:after {
  left: inherit; right: 0%;
  transform: scale(-1, 1);
}
*/

.status_wrap h2 span { display: block; font-size: 1.2em; text-align: center; font-weight: bold; border-bottom: 2px dotted #000;}
.status_wrap .status { padding: 2em 1em;}



/* 03 ------- */
.sec_03 { padding-top: 3em; padding-bottom: 3em;}
.sec_03 .wrap {}
.sec_03 img { max-width: 100%; height: auto;}
.sec_03 h2 { margin: 0; padding: 0.5em 0 0.3em; text-align: center;}

.event_wrap .row_wrap { margin-top: 1.5em; margin-bottom: 1.5em; padding: 0; overflow: visible;}
.event_wrap .row_wrap a { display: block; height: 100%; padding: 0; color: #000; text-decoration: none; background-color: #fff; box-shadow: 0 0 2px 0 rgba(128,128,128,0.2); border-radius: 0.8em; overflow: hidden; transition-duration: 0.3s;}

.event_wrap .row_wrap a:hover,
.event_wrap .row_wrap a:focus { box-shadow: 0 0 8px 4px rgba(229,215,190,1);}

.event_photo { margin-bottom: 0.8em;}
.event_category { display: block; float: left; padding: 0.3em 1em; background-color: #EBE3D3;}
.event_overview { clear: both; padding: 1em;}
.event_title { margin: 0 0 0.5em;}
.event_text { padding-bottom: 0.8em;}
.event_date { padding: 0.8em 0 0; font-size: 0.9em; color: #666; border-top: 1px dashed #666;}



/* 04 ------*/
.sec_04 { padding-top: 3.5em; padding-bottom: 3em; background-color: #EBE3D3;}
.news_wrap {}
.news_wrap h2 { float: left; display: block; width: 210px;}
.sec_04 .news { font-size: 1.1em; border-top: 2px solid #fff;}
.sec_04 .news dt,
.sec_04 .news dd { padding-top: 1.3em; padding-bottom:  1.3em;}
.sec_04 .news dt { width: 11em;}
.sec_04 .news dd { padding-left: 11em; border-bottom: 2px solid #fff;}

.sec_04 .news dd a { text-decoration: none; color: #000;}

.sec_04 .more_link { clear: both; justify-content: flex-end;}



/* 05 ------*/
.sec_05 { padding-top: 3em; padding-bottom: 0;}
.banner_text ul,
.banner_image ul { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin: 0;}

.banner_text li,
.banner_image li { width: 31.33333%; margin: 1em 1%;}
.banner_text li { margin-top: 1.5em; margin-bottom: 1.5em;}
.banner_image li { margin-top: calc(1em - 10px); margin-bottom: calc(1em - 10px);}

.banner_text li a,
.banner_image li a { display: flex; align-items: center; height: 100%; margin: 0 auto;}

.banner_text li a { width: calc(350px - 1.2em); padding: 1em 34px 0.9em 1em; font-size: 1.2em; color: #000; text-decoration: none; border: 1px solid #fff; box-shadow: 0 0 0 0.6em #EBE3D3; background: #fff url("../img/arrow_common01.png") right 12px center no-repeat; border-radius: 0.5em;}
.banner_image li a { width: 368px;}


.banner_text li a:hover,
.banner_text li a:focus { border-color: #633F4A; box-shadow: 0 0 0 0.6em #E2D6BF;}

/* footer ------*/
.top footer { margin-top: 0;}




/*************************************************
 レスポンシブ　1160 + 20 
**************************************************/
@media screen and (max-width:1180px) {
  
  .top_section > .wrap { margin-left: 2%; margin-right: 2%;}
  
  .row02,
  .row04 { flex-wrap: wrap;}
  
  
  
  
  /* ヘッダー */
  .top header { min-height: inherit;}
  
  
  /* 01 --------*/
  .sec_01 .row_wrap { margin-top: 50px;}
  .sec_01 .row02 .row_wrap { width: 100%;}
  

  /* 02 --------*/
  .sec_02 { padding-top: 1em; padding-bottom: 1em;}
  .sec_02 .wrap { margin-left: 0; margin-right: 0; background: none}
  .sec_02 .row_wrap { margin: 0;}
  .sec_02 .library_wrap { background-color: #ECE4D4;}
  .sec_02 .seat_wrap { background-color: #E4D7BD;}
  
  .sec_02 .row02 .row_wrap { width: 100%; margin: 0;}
  
  
  /* 03 --------*/
  .sec_03 .row04 .row_wrap { width: 31.33333%;}
  
  
  /* 04 --------*/
  .news_wrap h2 { width: 160px;}
  .sec_04 .news dt { float: none;  width: auto; padding-left: 0.5em; padding-bottom: 0.5em;} 
  .sec_04 .news dd { padding-top: 0; padding-left: 1em;} 
  
  
  /* 05 --------*/  
  .banner_text li { width: 48%;}

  .banner_text li a { width: calc(100% - 1.2em);}
  .banner_image li a { display: block; width: 100%;}
  .banner_image img { max-width: 100%; height: auto;} 
  

  
}


/*************************************************
 レスポンシブ　700 + 20 
**************************************************/
@media screen and (max-width:720px) {
  
  /* 05 --------*/
  .banner_image li { width: 48%;}
  
}


/*************************************************
 レスポンシブ　560 + 20 
**************************************************/
@media screen and (max-width:580px) {
  
  
  /* 01 --------*/
  .sec_01 { padding-bottom: 0;}
  .sec_01 .row_wrap { padding: 10px 2%;}
  
  .sec_01 .easy_search_wrap h2,
  .sec_01 .easy_search_wrap .easy_search { margin-left: 2%; margin-right: 2%;}
  .button_icon li { width: calc( 100% - 4%); margin: 5px 2%;}
  
    
  .button_mypage { margin-left: 2%; margin-right: 2%; margin-bottom: 5px;}
  .mypage_list { flex-wrap: wrap;}
  .mypage_list li { width: calc(100% - 4%); margin: 5px 2%;}

    
  /* 02 --------*/
  .sec_02 .row02 .row_wrap { display: block;}
  .sec_02 h2 { width: auto; margin: 1em 1em 0.5em 0; padding: 1em; background-color: #fff; background-image: none;}
  .status_wrap h2 span { display: inline;}  
  .status_wrap .status { padding: 0.5em 0.5em 1.5em; text-align: center;}
  
  
  /* 03 --------*/
  .sec_03 .row04 { margin-bottom: 1.5em;}
  .sec_03 .row04 .row_wrap { width: 48%; margin-bottom: 0;}


  /* 04 --------*/
  .news_wrap h2 { float: none; width: auto; text-align: center;}
  .sec_04 .news { font-size: 1em;}
  

  /* 05 --------*/
  .banner_text li { width: 98%; margin-top: 1em; margin-bottom: 1.25em;}
  .banner_text li a { font-size: 1.1em;}

} 

/*************************************************
 レスポンシブ　380
**************************************************/
@media screen and (max-width:380px) {
  /* 03 --------*/
  .sec_03 .row04 .row_wrap { width: 98%; margin-bottom: 0;}
  
}