*{box-sizing: border-box;}

a,a:visited{color:#28387A;text-decoration: none;}
a:hover{text-decoration: underline;opacity:.7;}


body{color:#222;
  background: url("images/materials/background2.jpg") repeat repeat center;
  background-color:rgba(255,255,255,0.7);
  background-blend-mode:lighten;
  font-family: 'Zen Old Mincho';font-weight: 400;font-style:normal;
}

/*common*/
.page_title{font-size:1.5rem;text-align: center;margin:3rem;}
.wrap{width:1000px;margin:auto;}
.full_width_img{width:100%;height:auto;}
.flex{display: flex;flex-wrap: wrap}
.container_box{margin:3rem 0;}
.title{font-size: 1.6rem;line-height: 1.4;font-weight: 400;}
.title_2{font-size:1.3rem;font-weight: 400;}
.title_3{font-size:1rem;}
.small{font-size:.8rem;}
.breadcrumb{line-height: 1.4;}
/*header*/
header{border-top:8px solid #222;}

.logo,.logo:hover,.logo:visited{
  text-align: center;
  color:#222;
  text-decoration: none;
  display:block;
  margin:1.6rem auto 1rem;
}

.logo_img{width:120px;height:auto;opacity:.9}


nav{
  text-align: center;
  margin-bottom:.8rem;
  padding-top:2px;
}

.nav_link{display: inline-block;margin:.3rem;color:#222;}
.nav_link:visited{color:#222;}

/*footer*/
footer{background:#222;color:#fff;margin:0;padding:0;}
.copyright{text-align:center;padding:6px;}

/* モーダルのスタイル */
.modal {
    display: none; /* 非表示にする */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景を半透明にする */
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    text-align: center; /* 中央揃えにする */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.login_label{text-align:left;font-size:.9rem;color:#666;display:block;}
.login_txt{display:block;width:100%;margin-bottom:1rem;height:1.8rem;}
.submit_btn{
  border-radius: .3rem;
  padding:6px 10px;
  text-align: center;
  display:block;
  margin:2rem auto 1rem;
  border:none;
  background:#28387A;
  width:60%;
  color:#fff;
}


/* ページトップボタンのスタイル */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.scroll-to-top.show {
    display: block;
}

/* 上向き矢印をボタン文言の前に追加 */
.scroll-to-top::before {
    content: ' \25B2'; /* Unicodeで上向き矢印 */
    margin-right: 5px; /* 矢印とテキストの間にスペースを追加 */
    font-size: 12px; /* 矢印のサイズ調整 */
    vertical-align: middle; /* テキストと矢印を中央揃え */
}

/*index*/
.greeting{width:780px;margin:auto;line-height: 1.6;}

/*calendar*/

.filter-btn{
  border-radius: 1rem;
  background:#fff;/*#28387A;*/
  border:1px solid #222;
  padding:3px 1rem;
  color: #222;
  margin:5px 3px;
}

    /* アクティブなボタンのスタイル */
    .filter-on {
        background-color: #222;
        color: #fff;
        border:1px solid #222;
    }

/* カレンダーのスタイル */
.calendar-title{
  font-weight: normal;
  font-size: 1.2rem;
  margin-bottom:.6rem;
}

.calendar-container {
    width: 1000px;
    margin: 0 auto 5rem;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 各セルの幅を固定 */
}

.calendar-header th {
    background-color: #222;
    color: #fff;
    padding:5px 0 3px;
    text-align: center;
    border:1px solid #222;
}

.calendar-cell {
    border: 1px solid rgba(236,211,176,0.5);
    text-align: center;
    padding: 6px;
    vertical-align: top;
    width: 100px;  /* セルの横幅を固定 */
    height: 100px; /* セルの縦幅を固定 */
    box-sizing: border-box;
    background:#fff;
}

/* 土曜の背景色 */
.saturday {
    background-color: #e0f7fa;
}

/* 日曜・祝日の背景色 */
.sunday, .holiday {
    background-color: #ffebee;
}

.calendar-date{
  text-align: left;
  margin:0;
  color:#666;
}

/* イベント表示 */
.event {
    text-align: left;
    line-height: 1.6;
}

/* カテゴリーラベル */
.category-label {
    padding: 1px 8px 0;
    border-radius: 1rem;
    font-size: .7rem;
    margin-right:3px;;
    display: inline-block;
    vertical-align: middle;
    background: #444;
    color:#fff;
}

.short-name{
  margin:1px 0 3px;
}

.start-time{
  margin:0 0 2px;
  text-align: center;
  font-size:.9rem;
}

.visitor_price{font-size:.9rem;color:#333;font-weight: normal;display: inline-block;margin:0 3px;}
.ic_price{font-size:.7rem;display:inline-block;}

.no-event{margin:0;}

/* フィルターボタンのセンタリング */
.filter-buttons {
    text-align: center;
    margin-bottom: 20px;
}

/* 月リンクのスタイル */
.month-links {
    text-align: center;
    margin-bottom: 20px;
}

.month-links ul {
    display: inline-block;
    padding: 0;
    list-style-type: none;
}

.month-links li {
    display: inline-block;
    margin:5px 3px;
}

/* 下向き矢印をリンクに追加 */
.arrow-link::after {
    content: ' \25BC'; /* Unicodeで下向き矢印 */
    margin-left:1px;  /* 矢印とテキストの間隔を調整 */
    font-size: 12px;   /* 矢印のサイズを調整 */
    vertical-align: middle; /* 矢印をテキストと中央揃えに */
}

/* カレンダーの月タイトルのセンタリング */
.calendar-title {
    text-align: center;
}

/*event*/


.event_left_col{
  width:63%;
  margin-right: 5%;
}

.courses{
  margin:0;
  padding:0 12px;
  background:rgba(255,255,255,.4);
  width:95%;
  border-radius: .2rem;
  border:1px solid #ccc;
}
.course{
  list-style: none;
  margin:1.2rem 0;
  font-weight: bold;
}

.course_note{font-size:.8rem;font-weight:normal;color:#666;}

.event_right_col{
  width:32%;
}

.dates_box{
  border:2px solid #C5B5A6;
  margin-top:15px;
  padding:6px 14px;
  background:rgba(255,255,255,.4);
  border-radius: .2rem;
  text-align: center;
}

.date{
  font-size:1.1rem;
}

.date_attention{
  font-size:.8rem;
  color:#999;
}
.schedule{
  margin:0;
  padding:0;
}
.date_box{
  list-style: none;
  border-bottom:1px solid #eee;
  padding:.2rem 0 .4rem;
}

.reserve_btn{
  background:#28387A;
  color:#fff;
  padding:4px 1.5rem;;
  border-radius:.3rem;
  margin-left: 10px;
  font-size: .9rem;
  width:70%;
  display: inline-block;
}
.reserve_btn:visited{color:#fff;}

.cancel_policy{}

.event_copy,.rules{
  line-height: 1.6;
  font-family: 'Zen Old Mincho';font-weight: 400;font-style:normal;
}

.prices{display:inline-block;margin-left:10px;}

/*rental*/
.welcome-message{text-align: center}

/*company*/
.company_profile{width:660px;margin:auto;display: flex;flex-wrap:wrap;line-height: 1.8}
.company_profile dt{width:6rem;margin:.6rem 0;}
.company_profile dd{width:calc(100% - 6rem);margin:.6rem 0;}
.icon_company{display: inline-block;width:5rem;text-align: center;background:#444;color:#fff;border-radius:1rem;font-size:.8rem;padding:0;}

/*request*/
.request_box{width:600px;margin:auto;}
.request_box input{display:block;width:12rem;}
.request_box textarea{display:block;width:100%;height:10rem;}
.return_link{display:block;width:12rem;margin:2rem auto;text-align: center;text-decoration:underline;cursor: pointer;}
.complete_message{margin-top:6rem;margin-bottom: 3rem;text-align: center;display:block;}


.back_link{text-align:center;display:block;margin-top:2rem;}




@media screen and (max-width: 700px) {
  .logo_img{width:100px;height:auto;opacity:.9}
   .wrap,.calendar-container,.event_left_col,.event_right_col{width:100%}
   .company_profile,.request_box{width:96%;margin:auto;}
   .inner_wrap,.grreting{width:90%;margin:auto;}
   .schedule{display:flex;flex-wrap: wrap}
   .date_box{width:50%;}
   .reserve_btn{display:block;margin:1rem auto;}
   .month-links{width:94%;margin:auto;}
   .calendar-cell{width:92%;display:block;margin:0 auto;height: auto;}
   .calendar-header th{display: none;}
   .empty-cell {display: none;}
   .start-time{display:inline-block;margin-left:8px;}
   .filter-btn{font-size:.8rem;}
   .filter-buttons{margin-bottom:5px;}
   .page_title{font-size:1.3rem;margin:2.5rem 0 1.2rem;}
   .prices{display:block;}
   .title{font-size: 1.3rem;}
}