@charset "UTF-8";

/*-------------------------
__page_style
-------------------------*/

#header_fixmenu{ z-index: 1040!important;}

#kids_artevent{ background: url("images/yellow_back.jpg"); background-size: contain; background-repeat: repeat-y;}
#kids_artevent .event_title{ width: 100%; min-height: 390px; background-image: url(images/title_back_pc@2x.png); background-position: left top; background-size: contain; background-repeat: no-repeat; position: relative;}
#kids_artevent .event_title h2{ width: 455px; height: 193px; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);}
#kids_artevent .event_title h2 img{}
#kids_artevent .event_data{ margin-top: -25px;}
#kids_artevent .event_data > p{ text-align: center; font-size: 1.6em; line-height: 1.5; font-weight: 700; color: #644632; margin-bottom: 30px;}
#kids_artevent .event_data .event_detail{ display: flex; align-items: center; justify-content: center; font-size: 1.6em; line-height: 1.5; font-weight: 700; margin-bottom: 30px;}
#kids_artevent .event_data .event_detail dl{ display: flex; align-items: center; justify-content: center; margin-right: 15px;}
#kids_artevent .event_data .event_detail dl:last-child{ margin-right: 0;}
#kids_artevent .event_data .event_detail dl dt{ color: #fff; font-weight: 700; background-color: #f5aa55; padding: 5px 15px; box-sizing: border-box; border-radius: 50vh; margin-right: 5px;}
#kids_artevent .event_data .event_detail dl dd{ color: #644632;}
#kids_artevent .shop_select{ width: 50%; background-color: #14a050; display: inline-block; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; border-radius: 50vh; padding: 15px 0; box-sizing: border-box;}
#kids_artevent .shop_select p{ font-size: 1.6em; color: #fff; font-weight: 700; margin-right: 10px;}
#kids_artevent .shop_select .select_wrap{ display: inline-flex; align-items: center; position: relative;}
#kids_artevent .shop_select .select_wrap::after{ position: absolute; right: 15px; width: 10px; height: 7px; background-color: #14a050; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; pointer-events: none;}
#kids_artevent .shop_select .select_wrap select{ appearance: none; min-width: 230px; height: 2.8em; padding: .4em calc(.8em + 30px) .4em .8em; border: 1px solid #d0d0d0; border-radius: 25px; background-color: #fff; color: #333333; font-size: 1.6em; cursor: pointer;}


#kids_artevent #images_list{ padding: 0 30px 10px; box-sizing: border-box;}
#kids_artevent #images_list ul{ display: flex; flex-wrap: wrap;}
#kids_artevent #images_list ul li{ width: calc((100% / 3) - 20px); border: 3px solid #b4dc82; box-sizing: border-box; background-color: #fff; text-align: center; border-radius: 10px; margin:0 10px; margin-bottom: 20px;}
#kids_artevent #images_list ul li a{ text-decoration: none;}
#kids_artevent #images_list ul li a .art_shop{ background-color: #b4dc82; color: #fff; font-size: 1.6em; font-weight: 700; padding: 10px 0;}
#kids_artevent #images_list ul li a .art_img{ width: 100%; aspect-ratio: 1; position: relative;}
#kids_artevent #images_list ul li a .art_img img{ width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); transition: all 0.3s;}
#kids_artevent #images_list ul li a .art_name{ color: #644632; font-size: 1.6em; font-weight: 700; padding: 10px 0; box-sizing: border-box;}
#kids_artevent #images_list ul li a:hover .art_img img{ opacity: 0.5;}