@charset "utf-8";

/* ===========================================
 * イベント・ファンサービス
 * ======================================== */
#com_content_wrapper .card_list_with_slick {
    margin-bottom: 0.4rem;
}

#com_content_wrapper #com_content.event_content {
    min-height: auto;
    padding: 0 !important;
}

.page_head_wrapper :after{
	position: absolute;
	right: 1rem;
	top: 1.0rem;
	/* margin: 0rem 1.0rem; */
	content: '';
	background: url(/cdn/sp/images/event/event_tokotan01_sp.png) no-repeat;
	background-size: 4.5rem;
	width: 5.5rem;
	height: 7rem;
	display: inline-flex;
}

.slick-slider {
    margin-bottom: 0;
}

/* アイコンカラー設定 */
.ico-grade.lady {
    background-color: #FFF !important;
    color: var(--MAIN_PALEPINK, #F59CAD) !important;
}

.ico-grade.hikaisai {
    background-color: #FFF !important;
    color: var(--MAIN_NAVY, #113952) !important;
}

/* 祝日カラー設定 */
.item_weekday.days-state-7 {
    background-color: #E73348 !important;
    color: #FFF !important;
    padding-right: 0.1rem;
}

.category_event .par-tab01 {
    border-bottom: 0.1rem solid #999999;
	gap: 0.5rem;
}

.category_event .par-tab01 .par-tab_li {
    height: 4rem;
    width: 8rem;
}

.category_event .par-tab01 .par-tab_li .par-tab_item {
    height: 6rem;
}

.category_event .par-tab01 .par-tab_li .par-tab_item .par-tab_item_cell {
    height: 4rem;
	width: 8rem;
	border: none;
    border-bottom: none;
    background-color: #DDDDDD;
    color: var(--MAIN_BLACK, #000000);
    font-size: 1.4rem;
    column-gap: 0.3rem;
}

.category_event .par-tab01 .par-tab_li.selected .par-tab_item .par-tab_item_cell {
    height: 4rem;
	background: #ff9d00;
    color: var(--MAIN_BLACK, #000000);
    font-size: 1.4rem;
}

.category_event .par-tab01 .par-tab_li .par-tab_item .par-tab_item_cell span.youtube_icon {
    background: url(/cdn/pc/images/top/ico_youtube.svg) center center no-repeat;
    background-size: contain;
    width: 2.8rem;
    height: 2.3rem;
    display: inline-flex;
}

.category_event .par-tab01 .par-tab_li.selected .par-tab_item .par-tab_item_cell::after {
	background: none;
}

/* カード・カレンダー共通 */
.card_slider_inner_content .card-header,
.event-contents .event-area-day .event-header {
    display: flex;
    align-items: center;
    background: var(--MAIN_COLOR, #003288);
}

.card_slider_inner_content .card-header .targetDate,
.event-contents .event-area-day .event-header .targetDate {
    display: flex;
    /* gap: 0.5rem; */
    color: var(--MAIN_WHITE, #FFF);
    text-align: center;
    align-items: center;
    font-size: 2.2rem;
    font-weight: bold;
}

.card_slider_inner_content .event-date .targetDate .event-day,
.event-contents .event-area-day .event-header .event-date .event-day {
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #FFFFFF;
}

.card_slider_inner_content .card-header .targetDate .item_weekday,
.event-contents .event-area-day .event-header .item_weekday {
    display: block;
    width: var(----margin_l, 2.3rem);
    height: var(----margin_l, 2.3rem);
    /* background: #FFFFFF; */
    border-radius: 50%;
    text-align: center;
    /* color: #000000; */
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.2rem;
}

.card_slider_inner_content .card-header .ico-grade,
.event-contents .event-area-day .event-header .ico-grade {
    width: 6.4rem;
    height: var(----margin_l, 2.4rem);
    margin-left: auto;
    /* color: #000000; */
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.4rem;
    border-radius: 2rem;
}

.card_slider_inner_content .card-wrapper .event-announce,
.event-contents .event-area-day .event-info .event-announce {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card_slider_inner_content .card-wrapper .event-announce .event-opendate img,
.card_slider_inner_content .card-wrapper .event-announce .event-locate img,
.event-contents .event-area-day .event-info .event-announce .event-opendate img,
.event-contents .event-area-day .event-info .event-announce .event-locate img {
    width: 2rem;
    height: 2rem;
}

.card_slider_inner_content .card-wrapper .event-textarea,
.event-contents .event-area-day .event-info .event-textarea {
    max-height: 3.6rem;
    font-size: 1.2rem;
    overflow: hidden;
    word-break: break-all;
}

.card_slider_inner_content .card-wrapper .event_link_area,
.event-contents .event-area-day .event-info .event_link_area {
	position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    vertical-align: middle;
	bottom: 1.5rem;
}

.card_slider_inner_content .card-wrapper .event_link_area .event_link,
.event-contents .event-area-day .event-info .event_link_area .event_link {
    display: flex;
    width: 17.5rem;
    height: 3.2rem;
    margin: auto;
    border-radius: 6.4rem;
    background: var(--MAIN_COLOR, #003288);
    line-height: 3.8rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding-left: 1rem;
    gap: 1rem;
}

.card_slider_inner_content .card-wrapper .event_link_area .event_link span,
.event-contents .event-area-day .event-info .event_link_area .event_link span {
    color: #FFFFFF;
    font-size: 1.8rem;
    line-height: 3.2rem;
}

.card_slider_inner_content .card-wrapper .event_link_area .event_link img,
.event-contents .event-area-day .event-info .event_link_area .event_link img {
    width: 1.6rem;
    height: 1.6rem;
}

/* カードタイプエリア */
.card_content {
    margin-bottom: 1rem;
}

.pick-up {
    width: 100%;
    margin:  1rem 3.2rem 1.0rem;
    color: var(--MAIN_COLOR, #003288);
    font-size: 3rem;
    font-weight: bold;
}

.pick-up span {
    color: var(--MAIN_COLOR, #003288);
}

.card_slider_inner_content {
    width: 37.5rem;
    height: 44.9rem;
}

.card_slider_inner_content .card_slider_list,
.card_slider_inner_content .card_slider_list .slick-list {
    height: 47.3rem;
}

.card_slider_inner_content .slick-initialized .slick-slide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.card_slider_inner_content .card_content_wrapper {
    display: block;
    width: 28.8rem;
    height: 44rem;
    border-radius: 1.6rem;
    background: var(--MAIN_WHITE, #FFF);
    box-shadow: 0 0.6rem 1.2rem #D6D2CD;
}

.card_slider_inner_content .card_content_wrapper .card-header {
    height: 6rem;
    padding: 0 1.6rem;
    border-radius: 1.6rem 1.6rem 0 0;
}

.card_slider_inner_content .card-header .event-date {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card_slider_inner_content .card_content_wrapper .endDate {
    display: flex;
    /* gap: 0.4rem; */
    align-items: center;
}

.card_slider_inner_content .endDate .event-day {
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.2rem;
    color: #FFFFFF;
}

.card_slider_inner_content .endDate .item_weekday {
    width: 1.2rem;
    height: 1.2rem;
    /* background: #FFFFFF; */
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.4rem;
    color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper {
	height: 38rem;
	display: flex;
	flex-direction: column;
	padding: 1.4rem 1.6rem 2.4rem;
	align-items: center;
	justify-content: flex-start;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper .card-img-area {
    position: relative;
    width: 25.6rem;
    height: 15.2rem;
    background: #FFFFFF;
    margin-bottom: 1rem;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper .card-img-area img {
    width: 25.6rem;
    height: 15.2rem;
    aspect-ratio: 80 / 47;
    object-fit: contain;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper .card-img-area .free-flg {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.6rem;
    height: 3.2rem;
    text-align: center;
    background: #D02424;
    color: var(--MAIN_WHITE, #FFF);
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 3.2rem;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper .card_title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2rem;
    margin-bottom: 0.8rem;
    overflow: hidden;
    word-break: break-all;
}

.card_slider_inner_content .card_content_wrapper .card-wrapper .card_info {
	width: 100%;
    height: 7rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card_slider_inner_content .card-wrapper .event-announce {
    margin-bottom: 0.8rem;
}

.card_slider_inner_content .card-wrapper .event-announce .event-opendate,
.card_slider_inner_content .card-wrapper .event-announce .event-locate {
    display: flex;
    height: 2rem;
    gap: 0.4rem;
}

.card_slider_inner_content .card-wrapper .event-announce .event-opendate span,
.card_slider_inner_content .card-wrapper .event-announce .event-locate span {
    line-height: 2rem;
    overflow: hidden;
    word-break: break-all;
}

/* スライダーエリア */
.card_slider_controls {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.card_slider_controls .card_slider_arrows {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(----margin_l, 2.4rem);
}

.card_slider_controls .card_slider_prev,
.card_slider_controls .card_slider_next {
    background-color: var(--MAIN_COLOR, #003288);
    display: flex;
    position: absolute;
    top: -33rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.5rem;
    align-items: center;
    justify-content: center;
}

.card_slider_controls .card_slider_prev {
    left: 1.9rem;
}

.card_slider_controls .card_slider_next {
    right: 1.9rem;
}

.card_slider_prev img {
    transform: rotate(180deg);
}

.card_slider_prev img,
.card_slider_next img {
    width: 1.6rem;
    height: 1.6rem;
    z-index: 10;
}

.card_slider_controls .card_slider_dots {
    display: block;
    width: 100%;
}

.card_slider_controls .card_slider_dots .slick-dots {
    position: relative;
    display: flex;
    bottom: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.card_slider_dots .slick-dots>li {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.card_slider_dots .slick-dots>li>button {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    text-indent: -99.9rem;
    padding: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #003288;
}

.card_slider_dots .slick-dots>li.slick-active>button {
    background: var(--MAIN_COLOR, #003288);
    background-size: 1.2rem 1.2rem;
}

/* カレンダータイプエリア */
#com_content_wrapper #com_content {
    padding: 1.5rem 0 2.4rem 0;
}

.category_event .parTitle01 {
    height: 6.4rem;
    line-height: 2;
}

.category_event .par-tgl_wrapper .par-toggle .tgl_slide .tgl_icon {
    top: 2rem;
}

.category_event .event-contents {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem;
}

.category_event .event-area-day {
    border: 0.1rem solid var(--BASE_LINE, #D9D9D9);
    border-radius: 1.6rem;

}

.category_event .event-area-day .event-header {
    height: 6.7rem;
    border-radius: 1.6rem 1.6rem 0 0;
}

.category_event .event-area-day .event-list {
    padding: 0 1.6rem;
}

.category_event .event-area-day .event-header {
    padding: 1.6rem;
}

.category_event .event-area-day li {
    padding: 2rem 0;
}

.category_event .event-area-day li:not(:last-child) {
    border-bottom: 0.1rem solid #D9D9D9;
}

.category_event .event-area-day .event-title-area {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    line-height: 2rem;
}

.category_event .event-area-day .event-title-area .event-title {
    font-size: 1.6rem;
    font-weight: bold;
    word-break: break-all;
}

.category_event .event-area-day .event-title-area .free-flg {
    min-width: 4.4rem;
    height: 2rem;
    border-radius: 1.6rem;
    background: #313131;
    color: var(--MAIN_WHITE, #FFF);
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    line-height: 2rem;
}

.category_event .event-area-day .event-info {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.category_event .event-area-day .event-info .event-announce .event-opendate,
.category_event .event-area-day .event-info .event-announce .event-locate {
    display: flex;
    gap: 0.4rem;
}

.category_event .event-area-day .event-info .event-announce .event-opendate span,
.category_event .event-area-day .event-info .event-announce .event-locate span {
    line-height: 2rem;
    word-break: break-all;
}

.category_event .event-area-day .event-info .event-txtarea {
    word-break: break-all;
}

.category_event .event-area-day .event-info .event_link_area {
    margin-top: 0.4rem;
}

.category_event .calendar-contents {
    position: relative;
    width: 32.8rem;
    margin: auto;
}

.category_event .calendar-contents .par-slider01 {
    margin-top: 0rem;
}

.category_event .calendar-contents .par-slider01 button{
    display: none;
}

.category_event .calendar-contents .par-slider01 button {
	position: absolute;
    border: 1px solid var(--MAIN_COLOR, #003288);
	border-radius: 0.8rem;
	margin-top: -4.6rem;
}

.category_event .calendar-contents .par-slider01 button {
    background-image: url("/cdn/sp/images/common/btn_w_down.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3rem;
    transform: rotate(90deg);
	margin-left: 12rem;
}

.category_event .calendar-contents .par-slider01 button.slick-next{
    transform: rotate(-90deg);
	margin-right: 8rem;
}

.category_event .calendar-contents .par-slider01 button.lick-disabled {
	border: 1px solid #898989;
}

.pager_wrapper div.pager_month{
    font-size: 3rem;
    color: var(--MAIN_COLOR, #003288);
    font-weight: bold;
}

.pager_wrapper div.show_month_text{
    display: flex;
    width: 7rem;
    font-size: 3rem;
    color: var(--MAIN_COLOR, #003288);
    font-weight: bold;
    justify-content: flex-end;
}

.category_event .calendar-contents .slick-dots {
    display: none !important;
}

.category_event .calendar-contents table {
    display: flex;
    overflow: scroll; /* スクロールする */
    white-space: nowrap; /* 自動改行しない */
    font-weight:bold;
    width: 32.8rem;
    background:#FFF;
    border:1px solid #E2E2E3;
    border-collapse:collapse;
    margin-top:5px;
}

.category_event .calendar-contents table p {
    font-size: 2rem;
}

.category_event .calendar-contents table th {
    color: #FFFFFF;
    background:var(--MAIN_COLOR, #003288);
}

.category_event .calendar-contents table td {
    min-height: 6rem;
	font-size: 2rem;
}

.category_event .calendar-contents table td.days-state-7 {
	background-color: #FDEDF5;
}

.category_event .calendar-contents table td.days-state-6 {
	background-color: #E8F5FF
}

.category_event .calendar-contents table td p.clear {
    opacity: 0.5;
}

.category_event .calendar-contents table th,
.category_event .calendar-contents table td {
    border:1px solid #898989;
    border-collapse:collapse;
    text-align: left;
    font-size:1.5rem;
    padding:0.5rem;
    vertical-align: top;
}

.category_event .calendar-contents table th {
    text-align: center;
}

.category_event .calendar-contents table td {
    min-height: 3rem;
}

.category_event .calendar-contents table td.date,
.category_event .calendar-contents table td.day{
    width: 2.5rem;
}

.category_event .calendar-contents table .state-6{
	background-color: #e7f1f8;
}

.category_event .calendar-contents table .day.state-6{
	background-color: #e7f1f8;
	color: #3A9CFC;
}

.category_event .calendar-contents table .state-0{
	background-color: #fce5e8;
}
.category_event .calendar-contents table .day.state-0{
	color: #e73348;
}

.category_event .calendar-contents table td.event{
    width: 27.5rem;
}

.category_event .calendar-contents table .event_name_area {
    display: flex;
    height: 2.2rem;
    background-color: #FF9D00;
    border-radius: 0.5rem;
    margin-top:0.2rem;
    padding-left: 0.5rem;
    align-content: center;
    align-items: center;
    gap: 0.3rem;
}

.category_event .calendar-contents table .ico-grade {
    width: 3rem;
    height: 1.6rem;
    border-radius: 2rem;
    font-weight: bold;
    font-size: 1.0rem;
    line-height: 1.5rem;
    text-align: center;
}

.category_event .calendar-contents table .event_title {
    height: 1.7rem;
    line-height: 1.5rem;
	font-size: 1.4rem;
	color: var(--MAIN_COLOR, #003288);
}

.category_event .img_area{
	position: absolute;
	left: 0rem;
	top: -2.0rem;
	/* margin: 0rem 1.0rem; */
	content: '';
	background: url(/cdn/sp/images/event/event_tokotan02_sp.png) no-repeat;
	background-size: contain;
	width: 5.5rem;
	height: 7rem;
	display: inline-flex;
}

.pager_wrapper .pager_block {
    margin: 2.5rem 0 1rem 0;
	display: flex;
    align-items: center;
    justify-content: center
}

.pager_wrapper .pager_block .pager_prev,
.pager_wrapper .pager_block .pager_next{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pager_wrapper .pager_block a.disabled{
    pointer-events: none;
}

.pager_wrapper .ico_page {
    display: inline-flex;
    width: 3.0rem;
    height: 3.0rem;
    margin-left: 0.6rem;
    margin-right: 0.4rem;
    align-items: center;
    border: 1px solid var(--MAIN_COLOR, #003288);
    border-radius: 6px;
}

.pager_wrapper .ico_page.disabled {
    border: 1px solid #898989;
}

.pager_wrapper i.ico_page{
    background-image: url("/cdn/sp/images/common/btn_w_down.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3rem;
    transform: rotate(90deg);
}

.pager_wrapper i.ico_page_next{
    transform: rotate(-90deg);
}

.pager_wrapper div.pager_month{
    font-size: 3rem;
    color: var(--MAIN_COLOR, #003288);
    font-weight: bold;
}

.pager_wrapper div.show_month_text{
    display: flex;
    width: 7rem;
    font-size: 3rem;
    color: var(--MAIN_COLOR, #003288);
    font-weight: bold;
    justify-content: flex-end;
}