@charset "UTF-8"; #content { margin: 60px auto 0; width: 1200px; height: 100%; } /*---------------------------------------------------------------------------- (1) Top Hero ----------------------------------------------------------------------------*/ #hero { margin-top: 160px; padding: 0; width: 100%; background-color:#f6e9e5; } .swiper { margin: 0 auto; text-align: center; width: 1200px; height: 440px;; } .swiper-pagination-bullet { width: 12px !important; height: 12px !important; margin: 0 0 0 10px !important; background: #eeeeee !important; } .swiper-pagination-bullet:first-child { margin: 0 !important; } .swiper-button-next, .swiper-button-prev { color: #eeeeee !important;; } /*---------------------------------------------------------------------------- (2) Top content ----------------------------------------------------------------------------*/ .top-content-wrap { display: flex; justify-content:space-between; flex-wrap: wrap; } .main-column { width: 900px; } .main-column a {color: #5f7e21;} .right-column { width: 250px; } .right-column a {color: #5f7e21;} section { margin-bottom: 100px; } /* lead ----------------------------*/ .lead-area { margin: 0 auto; width: 800px; text-align: center; line-height: 1.8; } .lead-area h2 {font-size: 18px;} .border-box { padding: 1em 1em; border: double 5px #ccc; } /* tabs ----------------------------*/ .tabs { background-color: #fff; width: 900px; margin: 0 auto;} .tab_item { width: calc(100%/4); height: 40px; line-height: 40px; background-color: #d9d9d9; line-height: 40px; font-size: 15px; text-align: center; color: #888888; display: block; float: left; text-align: center; transition: all 0.2s ease; } .tab_item:hover { opacity: 0.75; } input[name="tab_item"] { display: none; } /*内容*/ .tab_content { display: none; padding: 40px 0; height: 500px; clear: both; overflow: auto; border-top: 3px solid #e28c94; } /*選択されているタブのコンテンツのみを表示*/ #latest:checked ~ #latest, #announce:checked ~ #announce, #schedule:checked ~ #schedule, #members:checked ~ #members { display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background-color: #e28c94; color: #fff; } .tab_content li { padding: 20px; border-bottom: 1px solid #ddd; } .tab_content li .list-date { display: inline-block; margin-left: 10px; font-size: 1.2rem; font-size: 12px; } .tab_content .list-category { display: inline-block; color: #e28c94; font-size: 1.1rem; font-size: 11px; font-weight: bold; text-align: center; border: 1px solid #e28c94; border-radius: 3px; line-height: 1; margin-bottom: 5px; padding: 5px; width: 90px; } .tab_content .list-title { display: block; margin: 8px 0; } .tab_content .list-title::before { content: '■'; padding-right:5px; } .tab_content li p { line-height: 1.5; margin-bottom: 10px; } .tab_content li a { color: #5f7e21; text-decoration: underline; } /* maincolumn,rightcolumn ----------------------------*/ .title { margin-bottom: 15px; padding-bottom: 8px; border-bottom: solid 1px #333333; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; } .recommend { width: 900px; display: flex; flex-wrap: wrap; justify-content: space-between; } .recommend li { width: 49%; margin-bottom: 20px;; } .hours table { width: 900px; margin: 10px 0 40px; border-collapse: collapse; } .hours table th, td { border:1px solid #DDDDDD; text-align: center; padding: 10px; vertical-align: middle; } .hours table th { background-color: #f6f6f6; font-weight: normal; vertical-align: middle; } .hours table:last-child {margin-bottom: 15px;} .r-sidebanner li {margin-bottom: 15px;}